fix(VSlider): increase touch target size

fixes #4356
vuetifyjs · Jul 20, 2021 · 9c6a4a6 · 9c6a4a6
1 parent 4ca8391
commit 9c6a4a6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass
@@ -69,6 +69,15 @@
     transform: scale(0.1)
     pointer-events: none
 
+  &::after
+    content: ''
+    width: $slider-thumb-touch-size
+    height: $slider-thumb-touch-size
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
 .v-slider__ticks-container
   position: absolute
 

diff --git a/packages/vuetify/src/components/VSlider/_variables.scss b/packages/vuetify/src/components/VSlider/_variables.scss
@@ -16,6 +16,7 @@ $slider-thumb-label-height: 32px !default;
 $slider-thumb-label-transition: .3s map-get($transition, 'fast-in-fast-out') !default;
 $slider-thumb-label-width: 32px !default;
 $slider-thumb-size: 12px !default;
+$slider-thumb-touch-size: 42px !default;
 $slider-tick-border-radius: 0 !default;
 $slider-track-border-radius: 0 !default;
 $slider-track-width: 2px !default;