Vuetify: [Feature Request] v-slider thumb is tiny for mobile use.

[amitgur]

Problem to solve

I can't drag the v-slider on mobile. The v-slider thumb is too small.

Proposed solution

Changing the size of the thumb for friendly UX on mobile. Like this thumb https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider

[johnleider]

The v-slider thumb slider was built to match Material Design 1 spec. The newer version has some style updates that we will be implementing in the future as part of our MD2 update. Because of that, this issue is not required as all components will be updated to match.

[KaelWD]

I asked him to open this. It's fine visually, but the touch target is so small it's almost impossible to use.

[pianistprogrammer]

when is the update release coming , please?

[Zyles]

How do I make the slider button larger?

[DEberhardBrelag]

i still need this feature.. are there any updates on this?

[MentalGear]

I'm stunned that an advanced framework like vuetify has a basic slider input almost unusable, and the issue open for years. The slider target is very hard to reach, and highly frustrating to use. I don't understand how people can use it in that state.

[MentalGear]

Quickly fixed this by enlarging the slider touch target through a none-destructive CSS addition.
Specifically, I added a :after (new pseudo element) and set it invisible. Now the slider is a joy to use (as the rest of the frame work) as it's easily manipulatable. The fix can be made simply by adding this to your general / default css file.

.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%; }

Of course vuetify is welcome to add this as well. @johnleider
Also, I would suggest modifying :before to make the touch effect adoptable to different v-slider__thumb sizes.

.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; }

Example: (green border to visualize new touch target)