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

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>