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 @@
+
+
+
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()({
'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,
+ 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)