How to increase clickable area surrounding a Vuetify v-slider's nob?

Question

How do you increase the clickable area surrounding the nobs of Vuetify's v-slider component?

I would like to do this in order to make it easier for users to 'grab the nob' and control the slider, particularly for the sake of mobile UX.

Answer 1

Here is a method to increase the clickable area of the draggable v-slider and v-range-slider nobs using CSS. It should be noted that, as of February 2021, v-slider and v-range-slider do not yet have built-in props to control this functionality.

My answer is based on this github comment (note: it is worth reading this entire github issue thread, as it concerns the OP's question).

<style scoped lang="scss">
  .my-slider-class >>> .v-slider__thumb:after { 
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); 
    content: ''; 
    color: inherit; 
    width: 400%; 
    height: 400%; 
    border-radius: 50%; 
    background: transparent; 
    position: absolute; 
    left: -150%; 
    top: -150%; 
  }
  .my-slider-class >>> .v-slider__thumb:before { 
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); 
    content: ''; 
    color: inherit; 
    width: 200%; 
    height: 200%; 
    border-radius: 50%; 
    background: currentColor; 
    opacity: 0.3; 
    position: absolute; 
    left: -50%; 
    top: -50%; 
    transform: scale(0.1); 
    pointer-events: none; 
  }
</style>