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"

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"

• javascript
• html
• css
• vuetify.js
• mouse-cursor

3 Answers 3

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

First add a class to the then style as CSS. Exapmle below

<v-list>
   <v-list-item
       v-for="(item, index) in items"
          :key="index"
         >
           <v-list-item-title
             class="row-pointer"
         >{{ item.title }}</v-list-item-title>
    </v-list-item>
 </v-list>

<style scoped>
.row-pointer {
  cursor: pointer;
}
</style>

Here's the way I did it. This method enables the cursor to change from grab to grabbing when the user is clicking-and-holding the draggable part of the slider.

<style scoped lang="scss">
  .my-slider-class >>> .v-slider {
    cursor: pointer;
    &:active {
      cursor: grabbing;
    }
    .v-slider__thumb {
      cursor: grab;
      &:active {
        cursor: grabbing;
      }
    }
  }
</style>