From 51d695401f5e60894faa9c9a079c315a45f24b86 Mon Sep 17 00:00:00 2001
From: Marc Rooding <marc@mrooding.me>
Date: Fri, 17 Jan 2025 13:05:20 +0100
Subject: [PATCH] feat(VSlider): introduce a track-disabled property

---
 packages/api-generator/src/locale/en/VSlider.json        | 3 ++-
 .../docs/src/examples/v-slider/prop-track-disabled.vue   | 6 ++++++
 packages/vuetify/src/components/VSlider/VSlider.sass     | 7 +++++++
 packages/vuetify/src/components/VSlider/VSlider.tsx      | 1 +
 packages/vuetify/src/components/VSlider/slider.ts        | 9 +++++++++
 5 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/src/examples/v-slider/prop-track-disabled.vue

diff --git a/packages/api-generator/src/locale/en/VSlider.json b/packages/api-generator/src/locale/en/VSlider.json
index 8998cbfced9..4af61361eb9 100644
--- a/packages/api-generator/src/locale/en/VSlider.json
+++ b/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.",
diff --git a/packages/docs/src/examples/v-slider/prop-track-disabled.vue b/packages/docs/src/examples/v-slider/prop-track-disabled.vue
new file mode 100644
index 00000000000..5af1cd20c5c
--- /dev/null
+++ b/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>
diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass
index 899ed1dafbc..b52e709ec2f 100644
--- a/packages/vuetify/src/components/VSlider/VSlider.sass
+++ b/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
diff --git a/packages/vuetify/src/components/VSlider/VSlider.tsx b/packages/vuetify/src/components/VSlider/VSlider.tsx
index 6afaf9b349e..c36096452d1 100644
--- a/packages/vuetify/src/components/VSlider/VSlider.tsx
+++ b/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,
diff --git a/packages/vuetify/src/components/VSlider/slider.ts b/packages/vuetify/src/components/VSlider/slider.ts
index 56418e727a5..4985e622b42 100644
--- a/packages/vuetify/src/components/VSlider/slider.ts
+++ b/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)