@vaadin/slider 25.1.0-alpha5 → 25.1.0-alpha7

package/src/vaadin-range-slider.js

@@ -3,7 +3,9 @@
  * Copyright (c) 2026 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-slider-bubble.js';
 import { css, html, LitElement, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 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';
@@ -41,17 +43,23 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * `thumb`              | The slider thumb (applies to both thumbs)
  * `thumb-start`        | The start (lower value) thumb
  * `thumb-end`          | The end (upper value) thumb
+ * `marks`              | Container for min/max labels
+ * `min`                | Minimum value label
+ * `max`                | Maximum value label
  *
  * The following state attributes are available for styling:
  *
- * Attribute       | Description
- * ----------------|-------------
- * `disabled`      | Set when the slider is disabled
- * `readonly`      | Set when the slider is read-only
- * `focused`       | Set when the slider has focus
- * `focus-ring`    | Set when the slider is focused using the keyboard
- * `start-focused` | Set when the start thumb has focus
- * `end-focused`   | Set when the end thumb has focus
+ * Attribute          | Description
+ * -------------------|-------------
+ * `disabled`         | Set when the slider is disabled
+ * `readonly`         | Set when the slider is read-only
+ * `focused`          | Set when the slider has focus
+ * `focus-ring`       | Set when the slider is focused using the keyboard
+ * `start-active`     | Set when the start thumb is activated with mouse or touch
+ * `end-active`       | Set when the end thumb is activated with mouse or touch
+ * `start-focused`    | Set when the start thumb has focus
+ * `end-focused`      | Set when the end thumb has focus
+ * `min-max-visible`  | Set when the min/max labels are displayed
  *
  * The following custom CSS properties are available for styling:
  *
@@ -68,20 +76,52 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * `--vaadin-input-field-label-font-size`       |
  * `--vaadin-input-field-label-font-weight`     |
  * `--vaadin-input-field-required-indicator`    |
+ * `--vaadin-slider-bubble-arrow-size`          |
+ * `--vaadin-slider-bubble-background`          |
+ * `--vaadin-slider-bubble-border-color`        |
+ * `--vaadin-slider-bubble-border-radius`       |
+ * `--vaadin-slider-bubble-border-width`        |
+ * `--vaadin-slider-bubble-offset`              |
+ * `--vaadin-slider-bubble-padding`             |
+ * `--vaadin-slider-bubble-shadow`              |
+ * `--vaadin-slider-bubble-text-color`          |
+ * `--vaadin-slider-bubble-font-size`           |
+ * `--vaadin-slider-bubble-font-weight`         |
+ * `--vaadin-slider-bubble-line-height`         |
  * `--vaadin-slider-fill-background`            |
+ * `--vaadin-slider-fill-border-color`          |
+ * `--vaadin-slider-fill-border-width`          |
+ * `--vaadin-slider-marks-color`                |
+ * `--vaadin-slider-marks-font-size`            |
+ * `--vaadin-slider-marks-font-weight`          |
+ * `--vaadin-slider-thumb-border-color`         |
+ * `--vaadin-slider-thumb-border-radius`        |
+ * `--vaadin-slider-thumb-border-width`         |
+ * `--vaadin-slider-thumb-cursor`               |
+ * `--vaadin-slider-thumb-cursor-active`        |
  * `--vaadin-slider-thumb-height`               |
  * `--vaadin-slider-thumb-width`                |
  * `--vaadin-slider-track-background`           |
+ * `--vaadin-slider-track-border-color`         |
  * `--vaadin-slider-track-border-radius`        |
+ * `--vaadin-slider-track-border-width`         |
  * `--vaadin-slider-track-height`               |
  *
+ * In order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:
+ *
+ * Part name        | Description
+ * -----------------|----------------------
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
+ * `arrow`          | Arrow pointing to the thumb
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {Event} input - Fired when the slider value changes during user interaction.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
- * @customElement
+ * @customElement vaadin-range-slider
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes FieldMixin
@@ -181,6 +221,88 @@ class RangeSlider extends FieldMixin(
         notify: true,
         sync: true,
       },
+
+      /**
+       * Custom accessible name for the start (minimum) input.
+       * When not set, defaults to "${label} min" or "min" if no label.
+       * @attr {string} accessible-name-start
+       */
+      accessibleNameStart: {
+        type: String,
+      },
+
+      /**
+       * Custom accessible name for the end (maximum) input.
+       * When not set, defaults to "${label} max" or "max" if no label.
+       * @attr {string} accessible-name-end
+       */
+      accessibleNameEnd: {
+        type: String,
+      },
+
+      /** @private */
+      __startActive: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        attribute: 'start-active',
+        sync: true,
+      },
+
+      /** @private */
+      __endActive: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        attribute: 'end-active',
+        sync: true,
+      },
+
+      /** @private */
+      __startFocused: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        attribute: 'start-focused',
+        sync: true,
+      },
+
+      /** @private */
+      __endFocused: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        attribute: 'end-focused',
+        sync: true,
+      },
+
+      /** @private */
+      __startHover: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
+
+      /** @private */
+      __endHover: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
+
+      /** @private */
+      __startBubbleOpened: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
+
+      /** @private */
+      __endBubbleOpened: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
     };
   }
 
@@ -190,6 +312,7 @@ class RangeSlider extends FieldMixin(
 
     const startPercent = this.__getPercentFromValue(startValue);
     const endPercent = this.__getPercentFromValue(endValue);
+    const { min, max } = this.__getConstraints();
 
     return html`
       <div class="vaadin-slider-container">
@@ -205,6 +328,12 @@ class RangeSlider extends FieldMixin(
           <div part="thumb thumb-start"></div>
           <div part="thumb thumb-end"></div>
           <slot name="input"></slot>
+          <slot name="bubble"></slot>
+        </div>
+
+        <div part="marks" aria-hidden="true">
+          <span part="min">${min}</span>
+          <span part="max">${max}</span>
         </div>
 
         <div part="helper-text">
@@ -224,6 +353,8 @@ class RangeSlider extends FieldMixin(
     this.__value = [...this.value];
     this.__inputId0 = `slider-${generateUniqueId()}`;
     this.__inputId1 = `slider-${generateUniqueId()}`;
+
+    this.__onPointerUp = this.__onPointerUp.bind(this);
   }
 
   /** @protected */
@@ -233,6 +364,33 @@ class RangeSlider extends FieldMixin(
     const inputs = this.querySelectorAll('[slot="input"]');
     this._inputElements = [...inputs];
     this.ariaTarget = this;
+
+    this.__thumbStartElement = this.shadowRoot.querySelector('[part~="thumb-start"]');
+    this.__thumbEndElement = this.shadowRoot.querySelector('[part~="thumb-end"]');
+
+    this.__bubbleElements = [...this.querySelectorAll('vaadin-slider-bubble')];
+  }
+
+  /** @private */
+  __onPointerDown(event) {
+    super.__onPointerDown(event);
+
+    const index = this._inputElements.indexOf(event.composedPath()[0]);
+
+    if (!this.readonly && index !== -1) {
+      this.toggleAttribute('start-active', index === 0);
+      this.toggleAttribute('end-active', index === 1);
+      window.addEventListener('pointerup', this.__onPointerUp);
+      window.addEventListener('pointercancel', this.__onPointerUp);
+    }
+  }
+
+  /** @private */
+  __onPointerUp() {
+    window.removeEventListener('pointerup', this.__onPointerUp);
+    window.removeEventListener('pointercancel', this.__onPointerUp);
+    this.removeAttribute('start-active');
+    this.removeAttribute('end-active');
   }
 
   /**
@@ -252,12 +410,16 @@ class RangeSlider extends FieldMixin(
           type="range"
           id="${this.__inputId0}"
           slot="input"
+          aria-label="${this.accessibleNameStart || this.__getAriaLabel('min')}"
           .min="${min}"
           .max="${max}"
           .step="${step}"
           .value="${startValue}"
           .disabled="${this.disabled}"
           tabindex="${this.disabled ? -1 : 0}"
+          @pointerenter="${this.__onStartPointerEnter}"
+          @pointermove="${this.__onStartPointerMove}"
+          @pointerleave="${this.__onStartPointerLeave}"
           @keydown="${this.__onKeyDown}"
           @input="${this.__onStartInput}"
           @change="${this.__onChange}"
@@ -266,22 +428,63 @@ class RangeSlider extends FieldMixin(
           type="range"
           id="${this.__inputId1}"
           slot="input"
+          aria-label="${this.accessibleNameEnd || this.__getAriaLabel('max')}"
           .min="${min}"
           .max="${max}"
           .step="${step}"
           .value="${endValue}"
           .disabled="${this.disabled}"
           tabindex="${this.disabled ? -1 : 0}"
+          @pointerenter="${this.__onEndPointerEnter}"
+          @pointermove="${this.__onEndPointerMove}"
+          @pointerleave="${this.__onEndPointerLeave}"
           @keydown="${this.__onKeyDown}"
           @input="${this.__onEndInput}"
           @change="${this.__onChange}"
         />
+        <vaadin-slider-bubble
+          slot="bubble"
+          .positionTarget="${this.__thumbStartElement}"
+          .opened="${this.valueAlwaysVisible || this.__startBubbleOpened}"
+          theme="${ifDefined(this._theme)}"
+        >
+          ${startValue}
+        </vaadin-slider-bubble>
+        <vaadin-slider-bubble
+          slot="bubble"
+          .positionTarget="${this.__thumbEndElement}"
+          .opened="${this.valueAlwaysVisible || this.__endBubbleOpened}"
+          theme="${ifDefined(this._theme)}"
+        >
+          ${endValue}
+        </vaadin-slider-bubble>
       `,
       this,
       { host: this },
     );
   }
 
+  /** @protected */
+  willUpdate(props) {
+    super.willUpdate(props);
+
+    this.__updateBubbleState(props, {
+      active: '__startActive',
+      focused: '__startFocused',
+      hover: '__startHover',
+      opened: '__startBubbleOpened',
+      otherOpened: '__endBubbleOpened',
+    });
+
+    this.__updateBubbleState(props, {
+      active: '__endActive',
+      focused: '__endFocused',
+      hover: '__endHover',
+      opened: '__endBubbleOpened',
+      otherOpened: '__startBubbleOpened',
+    });
+  }
+
   /** @protected */
   updated(props) {
     super.updated(props);
@@ -335,8 +538,13 @@ class RangeSlider extends FieldMixin(
   _setFocused(focused) {
     super._setFocused(focused);
 
-    this.toggleAttribute('start-focused', isElementFocused(this._inputElements[0]));
-    this.toggleAttribute('end-focused', isElementFocused(this._inputElements[1]));
+    this.__startFocused = isElementFocused(this._inputElements[0]);
+    this.__endFocused = isElementFocused(this._inputElements[1]);
+  }
+
+  /** @private */
+  __getAriaLabel(suffix) {
+    return this.label ? `${this.label} ${suffix}` : suffix;
   }
 
   /** @private */
@@ -355,6 +563,7 @@ class RangeSlider extends FieldMixin(
 
     const value = event.target.value;
     this.__updateValue(value, 0);
+    this.__updateBubble(0);
     this.__dispatchInputEvent();
     this.__commitValue();
   }
@@ -370,14 +579,60 @@ class RangeSlider extends FieldMixin(
 
     const value = event.target.value;
     this.__updateValue(value, 1);
+    this.__updateBubble(1);
     this.__dispatchInputEvent();
     this.__commitValue();
   }
 
+  /** @private */
+  __isThumbEvent(event, thumb) {
+    const rect = thumb.getBoundingClientRect();
+    return (
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom
+    );
+  }
+
+  /** @private */
+  __onStartPointerEnter(event) {
+    if (this.__isThumbEvent(event, this.__thumbStartElement)) {
+      this.__startHover = true;
+    }
+  }
+
+  /** @private */
+  __onStartPointerMove(event) {
+    this.__startHover = this.__isThumbEvent(event, this.__thumbStartElement);
+  }
+
+  /** @private */
+  __onStartPointerLeave() {
+    this.__startHover = false;
+  }
+
+  /** @private */
+  __onEndPointerEnter(event) {
+    if (this.__isThumbEvent(event, this.__thumbEndElement)) {
+      this.__endHover = true;
+    }
+  }
+
+  /** @private */
+  __onEndPointerMove(event) {
+    this.__endHover = this.__isThumbEvent(event, this.__thumbEndElement);
+  }
+
+  /** @private */
+  __onEndPointerLeave() {
+    this.__endHover = false;
+  }
+
   /** @private */
   __onKeyDown(event) {
-    const prevKeys = ['ArrowLeft', 'ArrowDown'];
-    const nextKeys = ['ArrowRight', 'ArrowUp'];
+    const prevKeys = ['ArrowLeft', 'ArrowDown', 'PageDown', 'Home'];
+    const nextKeys = ['ArrowRight', 'ArrowUp', 'PageUp', 'End'];
 
     const isNextKey = nextKeys.includes(event.key);
     const isPrevKey = prevKeys.includes(event.key);
@@ -397,6 +652,11 @@ class RangeSlider extends FieldMixin(
       event.preventDefault();
     }
   }
+
+  /** @private */
+  __updateBubble(idx) {
+    this.__bubbleElements[idx].$.overlay._updatePosition();
+  }
 }
 
 defineCustomElement(RangeSlider);

package/src/vaadin-slider-bubble-overlay.js

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { sliderBubbleOverlayStyles } from './styles/vaadin-slider-bubble-overlay-base-styles.js';
+
+/**
+ * An element used internally by `<vaadin-slider>`. Not intended to be used separately.
+ *
+ * @customElement vaadin-slider-bubble-overlay
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes PositionMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class SliderBubbleOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+) {
+  static get is() {
+    return 'vaadin-slider-bubble-overlay';
+  }
+
+  static get styles() {
+    return sliderBubbleOverlayStyles;
+  }
+
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="overlay" id="overlay">
+        <div part="arrow"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+
+  /**
+   * Override method from `OverlayMixin` to not close on outside click.
+   * The bubble overlay `opened` is fully controlled by the slider.
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldCloseOnOutsideClick() {
+    return false;
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _updatePosition() {
+    super._updatePosition();
+
+    if (!this.positionTarget || !this.opened) {
+      return;
+    }
+
+    const targetRect = this.positionTarget.getBoundingClientRect();
+    const overlayRect = this.$.overlay.getBoundingClientRect();
+
+    const offset = targetRect.width / 2 - overlayRect.width / 2;
+
+    if (this.style.left) {
+      const left = overlayRect.left + offset;
+      if (left > 0) {
+        this.style.left = `${left}px`;
+      }
+    }
+
+    if (this.style.right) {
+      const right = parseFloat(this.style.right) + offset;
+      if (right > 0) {
+        this.style.right = `${right}px`;
+      }
+    }
+  }
+}
+
+defineCustomElement(SliderBubbleOverlay);
+
+export { SliderBubbleOverlay };

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

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * An element used internally by `<vaadin-slider>`. Not intended to be used separately.
+ */
+declare class SliderBubble extends HTMLElement {
+  /**
+   * The thumb element next to which the overlay should be aligned.
+   */
+  positionTarget: HTMLElement;
+
+  /**
+   * Whether the overlay is opened.
+   */
+  opened: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-slider-bubble': SliderBubble;
+  }
+}
+
+export { SliderBubble };

package/src/vaadin-slider-bubble.js

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-slider-bubble-overlay.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-slider>`. Not intended to be used separately.
+ *
+ * @customElement vaadin-slider-bubble
+ * @extends HTMLElement
+ * @private
+ */
+class SliderBubble extends ThemePropertyMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-slider-bubble';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: contents;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The thumb element next to which the overlay should be aligned.
+       */
+      positionTarget: {
+        type: Object,
+      },
+
+      /**
+       * Whether the overlay is opened.
+       */
+      opened: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <vaadin-slider-bubble-overlay
+        id="overlay"
+        .owner="${this}"
+        .opened="${this.opened}"
+        .positionTarget="${this.positionTarget}"
+        theme="${ifDefined(this._theme)}"
+        vertical-align="bottom"
+        no-vertical-overlap
+        modeless
+        exportparts="overlay, content, arrow"
+      >
+        <slot></slot>
+      </vaadin-slider-bubble-overlay>
+    `;
+  }
+}
+
+defineCustomElement(SliderBubble);
+
+export { SliderBubble };

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

@@ -34,4 +34,17 @@ export declare class SliderMixinClass {
    * readers.
    */
   readonly: boolean;
+
+  /**
+   * When true, the value bubble is always visible,
+   * regardless of focus or hover state.
+   * @attr {boolean} value-always-visible
+   */
+  valueAlwaysVisible: boolean;
+
+  /**
+   * When true, displays the min and max values below the slider track.
+   * @attr {boolean} min-max-visible
+   */
+  minMaxVisible: boolean;
 }