feat: implement disabled property in slider and range-slider

packages/slider/src/styles/vaadin-slider-base-styles.js

@@ -25,6 +25,12 @@ export const sliderStyles = css`
     display: none !important;
   }
 
+  :host([disabled]) {
+    cursor: var(--vaadin-disabled-cursor);
+    /* TODO which color should we use ? */
+    --vaadin-slider-fill-background: color-mix(in oklab, var(--vaadin-text-color) 50%, var(--vaadin-background-color));
+  }
+
   [part='track'] {
     box-sizing: border-box;
     position: absolute;

packages/slider/src/vaadin-range-slider.js

@@ -132,7 +132,8 @@ class RangeSlider extends SliderMixin(
           .max="${max}"
           .step="${step}"
           .value="${startValue}"
-          tabindex="0"
+          .disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
           @keydown="${this.__onKeyDown}"
           @input="${this.__onInput}"
           @change="${this.__onChange}"
@@ -145,7 +146,8 @@ class RangeSlider extends SliderMixin(
           .max="${max}"
           .step="${step}"
           .value="${endValue}"
-          tabindex="0"
+          .disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
           @keydown="${this.__onKeyDown}"
           @input="${this.__onInput}"
           @change="${this.__onChange}"
@@ -174,6 +176,10 @@ class RangeSlider extends SliderMixin(
    * @override
    */
   focus(options) {
+    if (this.disabled) {
+      return;
+    }
+
     if (this._inputElements) {
       this._inputElements[0].focus();
     }

packages/slider/src/vaadin-slider-mixin.d.ts

@@ -4,8 +4,11 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 
-export declare function SliderMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SliderMixinClass> & T;
+export declare function SliderMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DisabledMixinClass> & Constructor<SliderMixinClass> & T;
 
 export declare class SliderMixinClass {
   /**

packages/slider/src/vaadin-slider-mixin.js

@@ -3,12 +3,14 @@
  * Copyright (c) 2026 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 
 /**
  * @polymerMixin
+ * @mixes DisabledMixin
  */
 export const SliderMixin = (superClass) =>
-  class SliderMixinClass extends superClass {
+  class SliderMixinClass extends DisabledMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -169,10 +171,11 @@ export const SliderMixin = (superClass) =>
      * @private
      */
     __onPointerDown(event) {
-      if (event.button !== 0) {
+      if (this.disabled || event.button !== 0) {
         return;
       }
 
+      // Only handle pointerdown on the thumb, track or track-fill
       const part = event.composedPath()[0].getAttribute('part');
       if (!part || (!part.startsWith('track') && !part.startsWith('thumb'))) {
         return;

packages/slider/src/vaadin-slider.js

@@ -126,7 +126,8 @@ class Slider extends SliderMixin(
           .max="${max}"
           .value="${value}"
           .step="${step}"
-          tabindex="0"
+          .disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
           @input="${this.__onInput}"
           @change="${this.__onChange}"
         />
@@ -151,6 +152,10 @@ class Slider extends SliderMixin(
    * @override
    */
   focus(options) {
+    if (this.disabled) {
+      return;
+    }
+
     if (this._inputElement) {
       this._inputElement.focus();
     }

packages/slider/test/dom/__snapshots__/range-slider.test.snap.js

@@ -28,7 +28,7 @@ snapshots["vaadin-range-slider host default"] =
 snapshots["vaadin-range-slider host value"] = 
 `<vaadin-range-slider>
   <input
-    id="slider-2"
+    id="slider-0"
     max="100"
     min="0"
     slot="input"
@@ -37,7 +37,7 @@ snapshots["vaadin-range-slider host value"] =
     type="range"
   >
   <input
-    id="slider-3"
+    id="slider-1"
     max="100"
     min="0"
     slot="input"
@@ -52,7 +52,7 @@ snapshots["vaadin-range-slider host value"] =
 snapshots["vaadin-range-slider host min"] = 
 `<vaadin-range-slider>
   <input
-    id="slider-4"
+    id="slider-0"
     max="100"
     min="20"
     slot="input"
@@ -61,7 +61,7 @@ snapshots["vaadin-range-slider host min"] =
     type="range"
   >
   <input
-    id="slider-5"
+    id="slider-1"
     max="100"
     min="20"
     slot="input"
@@ -76,7 +76,7 @@ snapshots["vaadin-range-slider host min"] =
 snapshots["vaadin-range-slider host max"] = 
 `<vaadin-range-slider>
   <input
-    id="slider-6"
+    id="slider-0"
     max="80"
     min="0"
     slot="input"
@@ -85,7 +85,7 @@ snapshots["vaadin-range-slider host max"] =
     type="range"
   >
   <input
-    id="slider-7"
+    id="slider-1"
     max="80"
     min="0"
     slot="input"
@@ -100,7 +100,7 @@ snapshots["vaadin-range-slider host max"] =
 snapshots["vaadin-range-slider host step"] = 
 `<vaadin-range-slider>
   <input
-    id="slider-8"
+    id="slider-0"
     max="100"
     min="0"
     slot="input"
@@ -109,7 +109,7 @@ snapshots["vaadin-range-slider host step"] =
     type="range"
   >
   <input
-    id="slider-9"
+    id="slider-1"
     max="100"
     min="0"
     slot="input"
@@ -121,6 +121,35 @@ snapshots["vaadin-range-slider host step"] =
 `;
 /* end snapshot vaadin-range-slider host step */
 
+snapshots["vaadin-range-slider host disabled"] = 
+`<vaadin-range-slider
+  aria-disabled="true"
+  disabled=""
+>
+  <input
+    disabled=""
+    id="slider-0"
+    max="100"
+    min="0"
+    slot="input"
+    step="1"
+    tabindex="-1"
+    type="range"
+  >
+  <input
+    disabled=""
+    id="slider-1"
+    max="100"
+    min="0"
+    slot="input"
+    step="1"
+    tabindex="-1"
+    type="range"
+  >
+</vaadin-range-slider>
+`;
+/* end snapshot vaadin-range-slider host disabled */
+
 snapshots["vaadin-range-slider shadow default"] = 
 `<div part="track">
   <div

packages/slider/test/dom/__snapshots__/slider.test.snap.js

@@ -19,7 +19,7 @@ snapshots["vaadin-slider host default"] =
 snapshots["vaadin-slider host value"] = 
 `<vaadin-slider>
   <input
-    id="slider-1"
+    id="slider-0"
     max="100"
     min="0"
     slot="input"
@@ -34,7 +34,7 @@ snapshots["vaadin-slider host value"] =
 snapshots["vaadin-slider host min"] = 
 `<vaadin-slider>
   <input
-    id="slider-2"
+    id="slider-0"
     max="100"
     min="20"
     slot="input"
@@ -49,7 +49,7 @@ snapshots["vaadin-slider host min"] =
 snapshots["vaadin-slider host max"] = 
 `<vaadin-slider>
   <input
-    id="slider-3"
+    id="slider-0"
     max="80"
     min="0"
     slot="input"
@@ -64,7 +64,7 @@ snapshots["vaadin-slider host max"] =
 snapshots["vaadin-slider host step"] = 
 `<vaadin-slider>
   <input
-    id="slider-4"
+    id="slider-0"
     max="100"
     min="0"
     slot="input"
@@ -76,6 +76,25 @@ snapshots["vaadin-slider host step"] =
 `;
 /* end snapshot vaadin-slider host step */
 
+snapshots["vaadin-slider host disabled"] = 
+`<vaadin-slider
+  aria-disabled="true"
+  disabled=""
+>
+  <input
+    disabled=""
+    id="slider-0"
+    max="100"
+    min="0"
+    slot="input"
+    step="1"
+    tabindex="-1"
+    type="range"
+  >
+</vaadin-slider>
+`;
+/* end snapshot vaadin-slider host disabled */
+
 snapshots["vaadin-slider shadow default"] = 
 `<div part="track">
   <div

packages/slider/test/dom/range-slider.test.ts

@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync } from '@vaadin/testing-helpers';
 import '../../src/vaadin-range-slider.js';
+import { resetUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import type { RangeSlider } from '../../src/vaadin-range-slider.js';
 
 window.Vaadin ??= {};
@@ -11,6 +12,7 @@ describe('vaadin-range-slider', () => {
   let slider: RangeSlider;
 
   beforeEach(async () => {
+    resetUniqueId();
     slider = fixtureSync('<vaadin-range-slider></vaadin-range-slider>');
   });
 
@@ -41,6 +43,11 @@ describe('vaadin-range-slider', () => {
       slider.value = [20, 60];
       await expect(slider).dom.to.equalSnapshot();
     });
+
+    it('disabled', async () => {
+      slider.disabled = true;
+      await expect(slider).dom.to.equalSnapshot();
+    });
   });
 
   describe('shadow', async () => {

packages/slider/test/dom/slider.test.ts

@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync } from '@vaadin/testing-helpers';
 import '../../src/vaadin-slider.js';
+import { resetUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import type { Slider } from '../../src/vaadin-slider.js';
 
 window.Vaadin ??= {};
@@ -11,6 +12,7 @@ describe('vaadin-slider', () => {
   let slider: Slider;
 
   beforeEach(async () => {
+    resetUniqueId();
     slider = fixtureSync('<vaadin-slider></vaadin-slider>');
   });
 
@@ -41,6 +43,11 @@ describe('vaadin-slider', () => {
       slider.value = 50;
       await expect(slider).dom.to.equalSnapshot();
     });
+
+    it('disabled', async () => {
+      slider.disabled = true;
+      await expect(slider).dom.to.equalSnapshot();
+    });
   });
 
   describe('shadow', async () => {

packages/slider/test/range-slider.test.ts

@@ -99,6 +99,13 @@ describe('vaadin-range-slider', () => {
       expect(slider.hasAttribute('end-focused')).to.be.false;
     });
 
+    it('should not focus any of the inputs on focus() when disabled', () => {
+      slider.disabled = true;
+      slider.focus();
+      expect(document.activeElement).to.not.equal(inputs[0]);
+      expect(document.activeElement).to.not.equal(inputs[1]);
+    });
+
     it('should not throw when calling focus() before adding to the DOM', () => {
       expect(() => document.createElement('vaadin-range-slider').focus()).to.not.throw(Error);
     });
@@ -338,6 +345,18 @@ describe('vaadin-range-slider', () => {
 
         expect(spy).to.be.not.called;
       });
+
+      it('should not update value property on thumb pointermove when disabled', async () => {
+        slider.disabled = true;
+
+        const { x, y } = middleOfThumb(0);
+
+        await sendMouseToElement({ type: 'move', element: thumbs[0] });
+        await sendMouse({ type: 'down' });
+        await sendMouse({ type: 'move', position: [x + 20, y] });
+
+        expect(slider.value).to.deep.equal([0, 100]);
+      });
     });
 
     describe('track', () => {
@@ -409,6 +428,17 @@ describe('vaadin-range-slider', () => {
 
         expect(spy).to.be.calledOnce;
       });
+
+      it('should not update value property on track pointerdown when disabled', async () => {
+        slider.disabled = true;
+
+        const { x, y } = middleOfThumb(0);
+
+        await sendMouse({ type: 'move', position: [x - 20, y] });
+        await sendMouse({ type: 'down' });
+
+        expect(slider.value).to.deep.equal([20, 80]);
+      });
     });
 
     describe('thumbs limits', () => {