@vaadin/slider 25.1.0-alpha6 → 25.1.0-alpha7

package/src/vaadin-slider-mixin.js

@@ -50,6 +50,26 @@ export const SliderMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * When true, the value bubble is always visible,
+         * regardless of focus or hover state.
+         * @attr {boolean} value-always-visible
+         */
+        valueAlwaysVisible: {
+          type: Boolean,
+          value: false,
+          sync: true,
+        },
+
+        /**
+         * When true, displays the min and max values below the slider track.
+         * @attr {boolean} min-max-visible
+         */
+        minMaxVisible: {
+          type: Boolean,
+          reflectToAttribute: true,
+        },
+
         /** @private */
         __value: {
           type: Array,
@@ -83,6 +103,30 @@ export const SliderMixin = (superClass) =>
             width: var(--_thumb-width);
             height: 100%;
           }
+
+          ${tag}:not([readonly]) > input::-webkit-slider-thumb {
+            cursor: var(--vaadin-slider-thumb-cursor, grab);
+          }
+
+          ${tag}:not([readonly]) > input::-moz-range-thumb {
+            cursor: var(--vaadin-slider-thumb-cursor, grab);
+          }
+
+          ${tag}:is([active], [start-active], [end-active]) > input::-webkit-slider-thumb {
+            cursor: var(--vaadin-slider-thumb-cursor-active, grabbing);
+          }
+
+          ${tag}:is([active], [start-active], [end-active]) > input::-moz-range-thumb {
+            cursor: var(--vaadin-slider-thumb-cursor-active, grabbing);
+          }
+
+          ${tag}[disabled] > input::-webkit-slider-thumb {
+            cursor: var(--vaadin-disabled-cursor, not-allowed);
+          }
+
+          ${tag}[disabled] > input::-moz-range-thumb {
+            cursor: var(--vaadin-disabled-cursor, not-allowed);
+          }
         `,
       ];
     }
@@ -131,9 +175,9 @@ export const SliderMixin = (superClass) =>
      */
     __getConstraints() {
       return {
-        min: this.min || 0,
-        max: this.max || 100,
-        step: this.step || 1,
+        min: this.min !== undefined ? this.min : 0,
+        max: this.max !== undefined ? this.max : 100,
+        step: this.step !== undefined ? this.step : 1,
       };
     }
 
@@ -148,6 +192,54 @@ export const SliderMixin = (superClass) =>
       return (safeValue - min) / (max - min);
     }
 
+    /**
+     * Updates bubble visibility for a thumb based on trigger state changes.
+     * @param {Map} props - Changed properties from willUpdate
+     * @param {object} config
+     * @param {string} config.active - Active state property name
+     * @param {string} config.focused - Focused state property name
+     * @param {string} config.hover - Hover state property name
+     * @param {string} config.opened - Bubble opened property name
+     * @param {string} [config.otherOpened] - Other thumb's opened property (range slider)
+     * @private
+     */
+    __updateBubbleState(props, { active, focused, hover, opened, otherOpened }) {
+      if (props.has(active)) {
+        if (this[active]) {
+          // When slider is activated by track pointerdown, the hover flag
+          // isn't set, but the thumb is actually moved, so we set it here.
+          this[hover] = true;
+        } else if (props.get(active)) {
+          // Close bubble when drag ends unless the thumb has hover
+          this[opened] = this[hover];
+        }
+      }
+
+      if (props.has(focused)) {
+        if (this[focused]) {
+          this[opened] = true;
+          if (otherOpened) {
+            this[otherOpened] = false;
+          }
+        } else if (props.get(focused)) {
+          // Close bubble on blur unless the thumb has hover
+          this[opened] = this[hover];
+        }
+      }
+
+      if (props.has(hover)) {
+        if (this[hover]) {
+          this[opened] = true;
+          if (otherOpened) {
+            this[otherOpened] = false;
+          }
+        } else if (props.get(hover)) {
+          // Keep bubble open during drag (active state)
+          this[opened] = this[active];
+        }
+      }
+    }
+
     /**
      * @param {PointerEvent} event
      * @private

package/src/vaadin-slider.d.ts

@@ -72,16 +72,20 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
  * `track`              | The slider track
  * `track-fill`         | The filled portion of the track
  * `thumb`              | The slider 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
- * -------------|-------------
- * `active`     | Set when the slider is activated with mouse or touch
- * `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
+ * Attribute          | Description
+ * -------------------|-------------
+ * `active`           | Set when the slider is activated with mouse or touch
+ * `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
+ * `min-max-visible`  | Set when the min/max labels are displayed
  *
  * The following custom CSS properties are available for styling:
  *
@@ -98,13 +102,45 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
  * `--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.

package/src/vaadin-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 { defineCustomElement } from '@vaadin/component-base/src/define.js';
@@ -39,16 +41,20 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * `track`              | The slider track
  * `track-fill`         | The filled portion of the track
  * `thumb`              | The slider 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
- * -------------|-------------
- * `active`     | Set when the slider is activated with mouse or touch
- * `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
+ * Attribute          | Description
+ * -------------------|-------------
+ * `active`           | Set when the slider is activated with mouse or touch
+ * `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
+ * `min-max-visible`  | Set when the min/max labels are displayed
  *
  * The following custom CSS properties are available for styling:
  *
@@ -65,20 +71,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-slider
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes FieldMixin
@@ -140,6 +178,36 @@ class Slider extends FieldMixin(
         notify: true,
         sync: true,
       },
+
+      /** @private */
+      __active: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        attribute: 'active',
+        sync: true,
+      },
+
+      /** @private */
+      __focusInside: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
+
+      /** @private */
+      __hoverInside: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
+
+      /** @private */
+      __bubbleOpened: {
+        type: Boolean,
+        value: false,
+        sync: true,
+      },
     };
   }
 
@@ -147,6 +215,7 @@ class Slider extends FieldMixin(
   render() {
     const [value] = this.__value;
     const percent = this.__getPercentFromValue(value);
+    const { min, max } = this.__getConstraints();
 
     return html`
       <div class="vaadin-slider-container">
@@ -161,6 +230,12 @@ class Slider extends FieldMixin(
           </div>
           <div part="thumb"></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">
@@ -180,8 +255,7 @@ class Slider extends FieldMixin(
     this.__value = [this.value];
     this.__inputId = `slider-${generateUniqueId()}`;
 
-    this.addEventListener('pointerup', (e) => this.__onPointerUp(e));
-    this.addEventListener('pointercancel', (e) => this.__onPointerUp(e));
+    this.__onPointerUp = this.__onPointerUp.bind(this);
   }
 
   /** @protected */
@@ -193,22 +267,27 @@ class Slider extends FieldMixin(
     this.ariaTarget = input;
 
     this.addController(new LabelledInputController(input, this._labelController));
+
+    this.__thumbElement = this.shadowRoot.querySelector('[part="thumb"]');
+    this.__bubbleElement = this.querySelector('vaadin-slider-bubble');
   }
 
   /** @private */
   __onPointerDown(event) {
     super.__onPointerDown(event);
 
-    if (event.composedPath()[0] === this._inputElement) {
+    if (!this.readonly && event.composedPath()[0] === this._inputElement) {
       this.setAttribute('active', '');
+      window.addEventListener('pointerup', this.__onPointerUp);
+      window.addEventListener('pointercancel', this.__onPointerUp);
     }
   }
 
   /** @private */
-  __onPointerUp(event) {
-    if (event.composedPath()[0] === this._inputElement) {
-      this.removeAttribute('active');
-    }
+  __onPointerUp() {
+    window.removeEventListener('pointerup', this.__onPointerUp);
+    window.removeEventListener('pointercancel', this.__onPointerUp);
+    this.removeAttribute('active');
   }
 
   /**
@@ -234,16 +313,39 @@ class Slider extends FieldMixin(
           .step="${step}"
           .disabled="${this.disabled}"
           tabindex="${this.disabled ? -1 : 0}"
+          @pointerenter="${this.__onPointerEnter}"
+          @pointermove="${this.__onPointerMove}"
+          @pointerleave="${this.__onPointerLeave}"
           @keydown="${this.__onKeyDown}"
           @input="${this.__onInput}"
           @change="${this.__onChange}"
         />
+        <vaadin-slider-bubble
+          slot="bubble"
+          .positionTarget="${this.__thumbElement}"
+          .opened="${this.valueAlwaysVisible || this.__bubbleOpened}"
+          theme="${ifDefined(this._theme)}"
+        >
+          ${value}
+        </vaadin-slider-bubble>
       `,
       this,
       { host: this },
     );
   }
 
+  /** @protected */
+  willUpdate(props) {
+    super.willUpdate(props);
+
+    this.__updateBubbleState(props, {
+      active: '__active',
+      focused: '__focusInside',
+      hover: '__hoverInside',
+      opened: '__bubbleOpened',
+    });
+  }
+
   /** @protected */
   updated(props) {
     super.updated(props);
@@ -292,17 +394,64 @@ class Slider extends FieldMixin(
   __onInput(event) {
     event.stopPropagation();
     this.__updateValue(event.target.value, 0);
+    this.__updateBubble();
     this.__dispatchInputEvent();
     this.__commitValue();
   }
 
   /** @private */
   __onKeyDown(event) {
-    const arrowKeys = ['ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp'];
-    if (this.readonly && arrowKeys.includes(event.key)) {
+    const inputKeys = ['ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp', 'PageUp', 'PageDown', 'Home', 'End'];
+    if (this.readonly && inputKeys.includes(event.key)) {
       event.preventDefault();
     }
   }
+
+  /**
+   * Override method inherited from `FocusMixin` to update bubble state.
+   *
+   * @param {boolean} focused
+   * @protected
+   * @override
+   */
+  _setFocused(focused) {
+    super._setFocused(focused);
+
+    this.__focusInside = focused;
+  }
+
+  /** @private */
+  __isThumbEvent(event) {
+    const rect = this.__thumbElement.getBoundingClientRect();
+    return (
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom
+    );
+  }
+
+  /** @private */
+  __onPointerEnter(event) {
+    if (this.__isThumbEvent(event)) {
+      this.__hoverInside = true;
+    }
+  }
+
+  /** @private */
+  __onPointerMove(event) {
+    this.__hoverInside = this.__isThumbEvent(event);
+  }
+
+  /** @private */
+  __onPointerLeave() {
+    this.__hoverInside = false;
+  }
+
+  /** @private */
+  __updateBubble() {
+    this.__bubbleElement.$.overlay._updatePosition();
+  }
 }
 
 defineCustomElement(Slider);