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:
This is the way I want it to look / behave like:
I tried inline style, but it doesn't work: style="cursor: pointer"
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.
Apply the CSS property cursor:pointer; to the elements. (This is the default style when a cursor hovers over a button.)
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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With