@vaadin/slider 25.1.0-alpha2

package/src/vaadin-range-slider.js

@@ -0,0 +1,310 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement, render } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { sliderStyles } from './styles/vaadin-slider-base-styles.js';
+import { SliderMixin } from './vaadin-slider-mixin.js';
+
+/**
+ * `<vaadin-range-slider>` is a web component that represents a range slider
+ * for selecting a subset of the given range.
+ *
+ * ```html
+ * <vaadin-range-slider min="0" max="100" step="1"></vaadin-range-slider>
+ * ```
+ *
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes FocusMixin
+ * @mixes SliderMixin
+ * @mixes ThemableMixin
+ */
+class RangeSlider extends SliderMixin(
+  FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+) {
+  static get is() {
+    return 'vaadin-range-slider';
+  }
+
+  static get styles() {
+    return [
+      sliderStyles,
+      css`
+        :host([focus-ring][start-focused]) [part~='thumb-start'],
+        :host([focus-ring][end-focused]) [part~='thumb-end'] {
+          outline: var(--vaadin-focus-ring-width) var(--_outline-style, solid) var(--vaadin-focus-ring-color);
+          outline-offset: 1px;
+        }
+
+        :host([readonly]) {
+          --_outline-style: dashed;
+        }
+      `,
+    ];
+  }
+
+  static get experimental() {
+    return 'sliderComponent';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The value of the slider.
+       */
+      value: {
+        type: Array,
+        value: () => [0, 100],
+        notify: true,
+        sync: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    const [startValue, endValue] = this.__value;
+
+    const startPercent = this.__getPercentFromValue(startValue);
+    const endPercent = this.__getPercentFromValue(endValue);
+
+    return html`
+      <div part="track">
+        <div
+          part="track-fill"
+          style="${styleMap({
+            insetInlineStart: `${startPercent}%`,
+            insetInlineEnd: `${100 - endPercent}%`,
+          })}"
+        ></div>
+      </div>
+      <div part="thumb thumb-start" style="${styleMap({ insetInlineStart: `${startPercent}%` })}"></div>
+      <div part="thumb thumb-end" style="${styleMap({ insetInlineStart: `${endPercent}%` })}"></div>
+      <slot name="input"></slot>
+    `;
+  }
+
+  constructor() {
+    super();
+
+    this.__value = [...this.value];
+    this.__inputId0 = `slider-${generateUniqueId()}`;
+    this.__inputId1 = `slider-${generateUniqueId()}`;
+  }
+
+  /** @protected */
+  firstUpdated() {
+    super.firstUpdated();
+
+    const inputs = this.querySelectorAll('[slot="input"]');
+    this._inputElements = [...inputs];
+  }
+
+  /**
+   * Override update to render slotted `<input type="range" />`
+   * into light DOM after rendering shadow DOM.
+   * @protected
+   */
+  update(props) {
+    super.update(props);
+
+    const [startValue, endValue] = this.__value;
+    const { min, max, step } = this.__getConstraints();
+
+    render(
+      html`
+        <input
+          type="range"
+          id="${this.__inputId0}"
+          slot="input"
+          .min="${min}"
+          .max="${max}"
+          .step="${step}"
+          .value="${startValue}"
+          .disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @keydown="${this.__onKeyDown}"
+          @input="${this.__onInput}"
+          @change="${this.__onChange}"
+        />
+        <input
+          type="range"
+          id="${this.__inputId1}"
+          slot="input"
+          .min="${min}"
+          .max="${max}"
+          .step="${step}"
+          .value="${endValue}"
+          .disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @keydown="${this.__onKeyDown}"
+          @input="${this.__onInput}"
+          @change="${this.__onChange}"
+        />
+      `,
+      this,
+      { host: this },
+    );
+  }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('value') || props.has('min') || props.has('max')) {
+      const value = [...this.value];
+      value.forEach((v, idx) => {
+        this.__updateValue(v, idx, value);
+      });
+    }
+  }
+
+  /**
+   * @param {FocusOptions=} options
+   * @protected
+   * @override
+   */
+  focus(options) {
+    if (this.disabled) {
+      return;
+    }
+
+    if (this._inputElements) {
+      this._inputElements[0].focus();
+    }
+
+    super.focus(options);
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to set
+   * state attributes indicating which thumb has focus.
+   *
+   * @param {boolean} focused
+   * @protected
+   * @override
+   */
+  _setFocused(focused) {
+    super._setFocused(focused);
+
+    this.toggleAttribute('start-focused', isElementFocused(this._inputElements[0]));
+    this.toggleAttribute('end-focused', isElementFocused(this._inputElements[1]));
+  }
+
+  /**
+   * @param {PointerEvent} event
+   * @private
+   */
+  __focusInput(event) {
+    const index = this.__getThumbIndex(event);
+    this._inputElements[index].focus();
+  }
+
+  /** @private */
+  __commitValue() {
+    this.value = [...this.__value];
+  }
+
+  /**
+   * @param {Event} event
+   * @return {number}
+   */
+  __getThumbIndex(event) {
+    if (event.type === 'input') {
+      return this._inputElements.indexOf(event.target);
+    }
+
+    return this.__getClosestThumb(event);
+  }
+
+  /**
+   * @param {PointerEvent} event
+   * @return {number}
+   * @private
+   */
+  __getClosestThumb(event) {
+    let closestThumb;
+
+    // If both thumbs are at the start, use the second thumb,
+    // and if both are at tne end, use the first one instead.
+    if (this.__value[0] === this.__value[1]) {
+      const { min, max } = this.__getConstraints();
+      if (this.__value[0] === min) {
+        return 1;
+      }
+
+      if (this.__value[0] === max) {
+        return 0;
+      }
+    }
+
+    const percent = this.__getEventPercent(event);
+    const value = this.__getValueFromPercent(percent);
+
+    // First thumb position from the "end"
+    const index = this.__value.findIndex((v) => value - v < 0);
+
+    // Pick the first one
+    if (index === 0) {
+      closestThumb = index;
+    } else if (index === -1) {
+      // Pick the last one (position is past all the thumbs)
+      closestThumb = this.__value.length - 1;
+    } else {
+      const lastStart = this.__value[index - 1];
+      const firstEnd = this.__value[index];
+      // Pick the first one from the "start" unless thumbs are stacked on top of each other
+      if (Math.abs(lastStart - value) < Math.abs(firstEnd - value)) {
+        closestThumb = index - 1;
+      } else {
+        // Pick the last one from the "end"
+        closestThumb = index;
+      }
+    }
+
+    return closestThumb;
+  }
+
+  /** @private */
+  __onKeyDown(event) {
+    const prevKeys = ['ArrowLeft', 'ArrowDown'];
+    const nextKeys = ['ArrowRight', 'ArrowUp'];
+
+    const isNextKey = nextKeys.includes(event.key);
+    const isPrevKey = prevKeys.includes(event.key);
+
+    if (!isNextKey && !isPrevKey) {
+      return;
+    }
+
+    const index = this._inputElements.indexOf(event.target);
+
+    // Suppress native `input` event if start and end thumbs point to the same value,
+    // to prevent the case where slotted range inputs would end up in broken state.
+    if (
+      this.readonly ||
+      (this.__value[0] === this.__value[1] && ((index === 0 && isNextKey) || (index === 1 && isPrevKey)))
+    ) {
+      event.preventDefault();
+    }
+  }
+}
+
+defineCustomElement(RangeSlider);
+
+export { RangeSlider };

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * 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<DisabledMixinClass> & Constructor<SliderMixinClass> & T;
+
+export declare class SliderMixinClass {
+  /**
+   * The minimum allowed value.
+   */
+  min: number;
+
+  /**
+   * The maximum allowed value.
+   */
+  max: number;
+
+  /**
+   * The stepping interval of the slider.
+   */
+  step: number;
+
+  /**
+   * When true, the user cannot modify the value of the slider.
+   * The difference between `disabled` and `readonly` is that the
+   * read-only slider remains focusable and is announced by screen
+   * readers.
+   */
+  readonly: boolean;
+}

package/src/vaadin-slider-mixin.js

@@ -0,0 +1,275 @@
+/**
+ * @license
+ * 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 DisabledMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The minimum allowed value.
+         */
+        min: {
+          type: Number,
+          sync: true,
+        },
+
+        /**
+         * The maximum allowed value.
+         */
+        max: {
+          type: Number,
+          sync: true,
+        },
+
+        /**
+         * The stepping interval of the slider.
+         */
+        step: {
+          type: Number,
+          sync: true,
+        },
+
+        /**
+         * When true, the user cannot modify the value of the slider.
+         * The difference between `disabled` and `readonly` is that the
+         * read-only slider remains focusable and is announced by screen
+         * readers.
+         */
+        readonly: {
+          type: Boolean,
+          reflectToAttribute: true,
+        },
+
+        /** @private */
+        __value: {
+          type: Array,
+          sync: true,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.__onPointerMove = this.__onPointerMove.bind(this);
+      this.__onPointerUp = this.__onPointerUp.bind(this);
+
+      // Use separate mousedown listener for focusing the input, as
+      // pointerdown fires too early and the global `keyboardActive`
+      // flag isn't updated yet, which incorrectly shows focus-ring
+      this.addEventListener('mousedown', (e) => this.__onMouseDown(e));
+      this.addEventListener('pointerdown', (e) => this.__onPointerDown(e));
+    }
+
+    /** @protected */
+    firstUpdated() {
+      super.firstUpdated();
+
+      this.__lastCommittedValue = this.value;
+    }
+
+    /**
+     * @param {Event} event
+     * @return {number}
+     */
+    __getThumbIndex(_event) {
+      return 0;
+    }
+
+    /**
+     * @param {number} value
+     * @param {number} index
+     * @param {number[]} fullValue
+     * @private
+     */
+    __updateValue(value, index, fullValue = this.__value) {
+      const { min, max, step } = this.__getConstraints();
+
+      const minValue = fullValue[index - 1] !== undefined ? fullValue[index - 1] : min;
+      const maxValue = fullValue[index + 1] !== undefined ? fullValue[index + 1] : max;
+
+      const safeValue = Math.min(Math.max(value, minValue), maxValue);
+
+      const offset = safeValue - minValue;
+      const nearestOffset = Math.round(offset / step) * step;
+      const nearestValue = minValue + nearestOffset;
+
+      const newValue = Math.round(nearestValue);
+
+      this.__value = fullValue.with(index, newValue);
+    }
+
+    /**
+     * @return {{ min: number, max: number, step: number}}
+     * @private
+     */
+    __getConstraints() {
+      return {
+        min: this.min || 0,
+        max: this.max || 100,
+        step: this.step || 1,
+      };
+    }
+
+    /**
+     * @param {number} value
+     * @return {number}
+     * @private
+     */
+    __getPercentFromValue(value) {
+      const { min, max } = this.__getConstraints();
+      return (100 * (value - min)) / (max - min);
+    }
+
+    /**
+     * @param {number} percent
+     * @return {number}
+     * @private
+     */
+    __getValueFromPercent(percent) {
+      const { min, max } = this.__getConstraints();
+      return min + percent * (max - min);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @return {number}
+     * @private
+     */
+    __getEventPercent(event) {
+      const offset = event.offsetX;
+      const size = this.offsetWidth;
+      const safeOffset = Math.min(Math.max(offset, 0), size);
+      return safeOffset / size;
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @return {number}
+     * @private
+     */
+    __getEventValue(event) {
+      const percent = this.__getEventPercent(event);
+      return this.__getValueFromPercent(percent);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @private
+     */
+    __onMouseDown(event) {
+      const part = event.composedPath()[0].getAttribute('part');
+      if (!part || (!part.startsWith('track') && !part.startsWith('thumb'))) {
+        return;
+      }
+
+      // Prevent losing focus
+      event.preventDefault();
+
+      this.__focusInput(event);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @private
+     */
+    __onPointerDown(event) {
+      if (this.disabled || this.readonly || 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;
+      }
+
+      this.setPointerCapture(event.pointerId);
+      this.addEventListener('pointermove', this.__onPointerMove);
+      this.addEventListener('pointerup', this.__onPointerUp);
+      this.addEventListener('pointercancel', this.__onPointerUp);
+
+      this.__thumbIndex = this.__getThumbIndex(event);
+
+      // Update value on track click
+      if (part.startsWith('track')) {
+        const newValue = this.__getEventValue(event);
+        this.__updateValue(newValue, this.__thumbIndex);
+        this.__commitValue();
+      }
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @private
+     */
+    __onPointerMove(event) {
+      const newValue = this.__getEventValue(event);
+      this.__updateValue(newValue, this.__thumbIndex);
+      this.__commitValue();
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @private
+     */
+    __onPointerUp(event) {
+      this.__thumbIndex = null;
+
+      this.releasePointerCapture(event.pointerId);
+      this.removeEventListener('pointermove', this.__onPointerMove);
+      this.removeEventListener('pointerup', this.__onPointerUp);
+      this.removeEventListener('pointercancel', this.__onPointerUp);
+
+      this.__detectAndDispatchChange();
+    }
+
+    /**
+     * @param {Event} event
+     * @private
+     */
+    __focusInput(_event) {
+      this.focus({ focusVisible: false });
+    }
+
+    /** @private */
+    __detectAndDispatchChange() {
+      if (JSON.stringify(this.__lastCommittedValue) !== JSON.stringify(this.value)) {
+        this.__lastCommittedValue = this.value;
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @private
+     */
+    __onInput(event) {
+      const index = this.__getThumbIndex(event);
+      this.__updateValue(event.target.value, index);
+      this.__commitValue();
+    }
+
+    /**
+     * @param {Event} event
+     * @private
+     */
+    __onChange(event) {
+      event.stopPropagation();
+      this.__detectAndDispatchChange();
+    }
+
+    /**
+     * Fired when the user commits a value change.
+     *
+     * @event change
+     */
+  };

package/src/vaadin-slider.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SliderMixin } from './vaadin-slider-mixin.js';
+
+/**
+ * Fired when the user commits a value change.
+ */
+export type SliderChangeEvent = Event & {
+  target: Slider;
+};
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type SliderValueChangedEvent = CustomEvent<{ value: number }>;
+
+export interface SliderCustomEventMap {
+  'value-changed': SliderValueChangedEvent;
+}
+
+export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMap {
+  change: SliderChangeEvent;
+}
+
+/**
+ * `<vaadin-slider>` is a web component that represents a range slider
+ * for selecting numerical values within a defined range.
+ *
+ * ```html
+ * <vaadin-slider min="0" max="100" step="1"></vaadin-slider>
+ * ```
+ *
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ */
+declare class Slider extends SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+  /**
+   * The value of the slider.
+   */
+  value: number;
+
+  addEventListener<K extends keyof SliderEventMap>(
+    type: K,
+    listener: (this: Slider, ev: SliderEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof SliderEventMap>(
+    type: K,
+    listener: (this: Slider, ev: SliderEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-slider': Slider;
+  }
+}
+
+export { Slider };