feat(VSlider): introduce track disabled

packages/api-generator/src/locale/en/VSlider.json

@@ -2,7 +2,8 @@
   "props": {
     "alwaysDirty": "When used with the **thumb-label** prop will always show the thumb label.",
     "inverseLabel": "Reverse the label position. Works with **rtl**.",
-    "vertical": "Changes slider direction to vertical."
+    "vertical": "Changes slider direction to vertical.",
+    "trackDisabled": "Disables clicking on the slider track"
   },
   "slots": {
     "thumb-label": "Slot for the thumb label.",

packages/docs/src/examples/v-slider/prop-track-disabled.vue

@@ -0,0 +1,6 @@
+<template>
+  <v-slider
+    model-value="30"
+    track-disabled
+  ></v-slider>
+</template>

packages/vuetify/src/components/VSlider/VSlider.sass

@@ -32,9 +32,16 @@
     .v-input--disabled &
       opacity: var(--v-disabled-opacity)
 
+    .v-slider--track-disabled &
+      cursor: default
+
     .v-input--error:not(.v-input--disabled) &
       color: rgb(var(--v-theme-error))
 
+  .v-slider-thumb
+    .v-slider--track-disabled &
+      cursor: pointer
+
   // Modifiers
   .v-slider.v-input--horizontal
     align-items: center

packages/vuetify/src/components/VSlider/VSlider.tsx

@@ -106,6 +106,7 @@ export const VSlider = genericComponent<VSliderSlots>()({
               'v-slider--focused': isFocused.value,
               'v-slider--pressed': mousePressed.value,
               'v-slider--disabled': props.disabled,
+              'v-slider--track-disabled': props.trackDisabled,
             },
             rtlClasses.value,
             props.class,

packages/vuetify/src/components/VSlider/slider.ts

@@ -123,6 +123,10 @@ export const makeSliderProps = propsFactory({
     type: [Number, String],
     default: 4,
   },
+  trackDisabled: {
+    type: Boolean as PropType<boolean | null>,
+    default: null,
+  },
   direction: {
     type: String as PropType<'horizontal' | 'vertical'>,
     default: 'horizontal',
@@ -194,6 +198,7 @@ export const useSlider = ({
   const trackSize = computed(() => parseInt(props.trackSize, 10))
   const numTicks = computed(() => (max.value - min.value) / step.value)
   const disabled = toRef(props, 'disabled')
+  const trackDisabled = toRef(props, 'trackDisabled')
 
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color)
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color)
@@ -283,6 +288,10 @@ export const useSlider = ({
   function onSliderMousedown (e: MouseEvent) {
     e.preventDefault()
 
+    if (trackDisabled.value && !(e.target as HTMLElement).closest('.v-slider-thumb')) {
+      return
+    }
+
     handleStart(e)
 
     window.addEventListener('mousemove', onMouseMove, moveListenerOptions)