Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify slider: Change mouse cursor to pointer on hover and click

Is there a way in vuetify to change the mouse cursor, when hovering over or clicking on the blue circular button element of the slider (v-slider)?

This is what it looks / behaves right now:

enter image description here

This is the way I want it to look / behave like:

enter image description here

I tried inline style, but it doesn't work: style="cursor: pointer"

like image 886
baermathias Avatar asked Mar 24 '19 10:03

baermathias


People also ask

How do I change the cursor when I hover over the button?

You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.

Which CSS property can you use to change the cursor style on the hover mouse event?

Apply the CSS property cursor:pointer; to the elements. (This is the default style when a cursor hovers over a button.)

How do I hover in Vuetify?

The v-hover component is a wrapper that should contain only one child element, and can trigger an event when hovered over. In order for v-hover to work properly, either the value prop should be set to true or the wrapped element should contain v-slot="{ wrapper }" . Hover over me!


1 Answers

There is no props available to change cursor. Possible way to change cursor to add css to .v-slider__thumb class

.v-slider__thumb{
  cursor:grabbing;
  height:42px;
  width:42px;
}

Codepen : https://codepen.io/anon/pen/XGOqWm

like image 138
dagalti Avatar answered Oct 02 '22 13:10

dagalti