@vaadin/slider 25.1.0-alpha5 → 25.1.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/slider",
-  "version": "25.1.0-alpha5",
+  "version": "25.1.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,7 @@
     "src",
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "custom-elements.json",
     "web-types.json",
     "web-types.lit.json"
   ],
@@ -34,21 +35,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-alpha5",
-    "@vaadin/component-base": "25.1.0-alpha5",
-    "@vaadin/field-base": "25.1.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha5",
+    "@vaadin/a11y-base": "25.1.0-alpha7",
+    "@vaadin/component-base": "25.1.0-alpha7",
+    "@vaadin/field-base": "25.1.0-alpha7",
+    "@vaadin/overlay": "25.1.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.1.0-alpha5",
-    "@vaadin/test-runner-commands": "25.1.0-alpha5",
+    "@vaadin/chai-plugins": "25.1.0-alpha7",
+    "@vaadin/test-runner-commands": "25.1.0-alpha7",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha5"
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha7"
   },
+  "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "9681e63d220c9e8d9d7c58cee272e5820b8ced19"
+  "gitHead": "98c586125f769c8fefd307536965293668fda81d"
 }

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

@@ -22,17 +22,30 @@ export const sliderStyles = css`
   :host([disabled]) {
     cursor: var(--vaadin-disabled-cursor);
     --vaadin-slider-fill-background: linear-gradient(
-        var(--vaadin-text-color-disabled),
-        var(--vaadin-text-color-disabled)
+        var(--vaadin-border-color-secondary),
+        var(--vaadin-border-color-secondary)
       )
       var(--vaadin-background-color);
+    --vaadin-slider-thumb-background: var(--vaadin-slider-fill-background);
+    --vaadin-slider-thumb-border-color: transparent;
   }
 
   :host([readonly]) {
-    --vaadin-slider-fill-background: var(--vaadin-background-color);
+    --vaadin-slider-fill-background: var(--vaadin-border-color);
+    --vaadin-slider-thumb-background: var(--vaadin-background-color);
+    --vaadin-slider-thumb-border-color: var(--vaadin-border-color);
     --_outline-style: dashed;
   }
 
+  :host([min-max-visible]) {
+    grid-template:
+      'label' auto var(--_helper-above-field, 'helper' auto) 'baseline' 0 'input' 1fr 'marks' auto var(
+        --_helper-below-field,
+        'helper' auto
+      )
+      'error' auto / 100%;
+  }
+
   #controls {
     grid-area: input;
     display: inline-grid;
@@ -40,7 +53,6 @@ export const sliderStyles = css`
     width: var(--vaadin-field-default-width, 12em);
     max-width: 100%;
     min-width: 100%;
-    min-height: var(--_thumb-height);
     --_track-width: calc(100% - var(--_thumb-width));
   }
 
@@ -60,6 +72,8 @@ export const sliderStyles = css`
     height: var(--vaadin-slider-track-height, 0.25lh);
     background: var(--vaadin-slider-track-background, var(--vaadin-background-container));
     border-radius: var(--vaadin-slider-track-border-radius, var(--vaadin-radius-m));
+    border: var(--vaadin-slider-track-border-width, 0) solid
+      var(--vaadin-slider-track-border-color, var(--vaadin-border-color-secondary));
   }
 
   [part='track-fill'] {
@@ -67,6 +81,8 @@ export const sliderStyles = css`
     grid-column: fill-start / fill-end;
     height: 100%;
     background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
+    box-shadow: inset 0 0 0 var(--vaadin-slider-fill-border-width, 1px)
+      var(--vaadin-slider-fill-border-color, transparent);
   }
 
   [part~='thumb'] {
@@ -75,16 +91,13 @@ export const sliderStyles = css`
     grid-column: thumb1;
     width: var(--_thumb-width);
     height: var(--_thumb-height);
-    background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
-    border-radius: 50%;
+    background: var(--vaadin-slider-thumb-background, var(--vaadin-background-color));
+    border: var(--vaadin-slider-thumb-border-width, 1px) solid
+      var(--vaadin-slider-thumb-border-color, var(--vaadin-text-color));
+    border-radius: var(--vaadin-slider-thumb-border-radius, var(--vaadin-radius-l));
     touch-action: none;
   }
 
-  :host([readonly]) [part~='thumb'],
-  :host([readonly]) [part='track-fill'] {
-    border: dashed 1px var(--vaadin-border-color);
-  }
-
   :host([readonly]) [part='track-fill'] {
     border-inline-end: none;
   }
@@ -100,5 +113,20 @@ export const sliderStyles = css`
     background: transparent;
     outline: 0;
     -webkit-tap-highlight-color: transparent;
+    cursor: inherit;
+    z-index: 999;
+  }
+
+  [part='marks'] {
+    display: none;
+    font-size: var(--vaadin-slider-marks-font-size, 0.75em);
+    font-weight: var(--vaadin-slider-marks-font-weight, inherit);
+    color: var(--vaadin-slider-marks-color, var(--vaadin-text-color-secondary));
+  }
+
+  :host([min-max-visible]) [part='marks'] {
+    grid-area: marks;
+    display: flex;
+    justify-content: space-between;
   }
 `;

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

@@ -0,0 +1,124 @@
+/**
+ * @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/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+
+const sliderBubbleOverlay = css`
+  :host {
+    --_arrow-size: var(--vaadin-slider-bubble-arrow-size, 8px);
+    --_border-width: var(
+      --vaadin-slider-bubble-border-width,
+      var(--vaadin-tooltip-border-width, var(--vaadin-overlay-border-width, 1px))
+    );
+    --_default-offset: var(--vaadin-slider-bubble-offset, 2px);
+    --_rtl-multiplier: 1;
+  }
+
+  :host([dir='rtl']) {
+    --_rtl-multiplier: -1;
+  }
+
+  [part='overlay'] {
+    position: relative;
+    overflow: visible;
+    max-width: var(--vaadin-tooltip-max-width, 40ch);
+    padding: var(
+      --vaadin-slider-bubble-padding,
+      var(--vaadin-tooltip-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container))
+    );
+    border: var(
+        --vaadin-slider-bubble-border-width,
+        var(--vaadin-tooltip-border-width, var(--vaadin-overlay-border-width, 1px))
+      )
+      solid
+      var(
+        --vaadin-slider-bubble-border-color,
+        var(--vaadin-tooltip-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)))
+      );
+    border-radius: var(
+      --vaadin-slider-bubble-border-radius,
+      var(--vaadin-tooltip-border-radius, var(--vaadin-radius-m))
+    );
+    background: var(
+      --vaadin-slider-bubble-background,
+      var(--vaadin-tooltip-background, var(--vaadin-background-color))
+    );
+    color: var(--vaadin-slider-bubble-text-color, var(--vaadin-tooltip-text-color, inherit));
+    font-size: var(--vaadin-slider-bubble-font-size, var(--vaadin-tooltip-font-size, 0.9em));
+    font-weight: var(--vaadin-slider-bubble-font-weight, var(--vaadin-tooltip-font-weight, inherit));
+    line-height: var(--vaadin-slider-bubble-line-height, var(--vaadin-tooltip-line-height, inherit));
+    box-shadow: var(--vaadin-slider-bubble-shadow, var(--vaadin-tooltip-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2)));
+  }
+
+  :host([top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-slider-bubble-offset, calc(var(--_arrow-size) + var(--_default-offset)));
+  }
+
+  :host([bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-slider-bubble-offset, calc(var(--_arrow-size) + var(--_default-offset)));
+  }
+
+  [part='arrow'] {
+    display: block;
+    position: absolute;
+    background: inherit;
+    border: inherit;
+    border-start-start-radius: var(--vaadin-slider-bubble-arrow-border-radius, 0);
+    inset-inline-start: 50%;
+    outline: inherit;
+    box-shadow: inherit;
+    width: var(--_arrow-size);
+    height: var(--_arrow-size);
+    rotate: 45deg;
+    --o: 20px; /* clip-path outset, how far outward it extends to reveal the outline and box shadow */
+    --b: var(--_border-width);
+    /* We need this elaborate clip-path to allow the arrow bg and border to cover
+      the overlay border but prevent the outline and box-shadow from covering it */
+    clip-path: polygon(
+      calc(var(--o) * -1) calc(var(--o) * -1),
+      calc(100% + var(--o) - var(--b)) calc(var(--o) * -1),
+      calc(100% - var(--b) * 1.4) 0,
+      100% 0,
+      calc(100% - var(--b)) var(--b),
+      calc(100% - var(--b)) calc(var(--b) + var(--ff, 0px)),
+      calc(var(--b) + var(--ff, 0px)) calc(100% - var(--b)),
+      calc(var(--b)) calc(100% - var(--b)),
+      0 100%,
+      0 calc(100% - var(--b) * 1.4),
+      calc(var(--o) * -1) calc(100% + var(--o) - var(--b))
+    );
+  }
+
+  /* Firefox renders a blurry edge for a diagonal clip-path + rotation,
+    so we need to extend the clip-path slightly further on the diagonal */
+  @supports (-moz-appearance: none) {
+    [part='arrow'] {
+      --ff: 1px;
+    }
+  }
+
+  :host([top-aligned]) [part='arrow'] {
+    top: 0;
+    translate: calc(-50% * var(--_rtl-multiplier)) -50%;
+  }
+
+  :host([end-aligned][top-aligned]) [part='arrow'] {
+    translate: calc(50% * var(--_rtl-multiplier)) -50%;
+  }
+
+  :host([bottom-aligned]) [part='arrow'] {
+    bottom: 0;
+    rotate: 225deg;
+    translate: calc(-50% * var(--_rtl-multiplier)) 50%;
+  }
+
+  :host([end-aligned][bottom-aligned]) [part='arrow'] {
+    translate: calc(50% * var(--_rtl-multiplier)) 50%;
+  }
+`;
+
+export const sliderBubbleOverlayStyles = [overlayStyles, sliderBubbleOverlay];

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

@@ -74,17 +74,23 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
  * `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:
  *
@@ -101,13 +107,45 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
  * `--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.
@@ -120,6 +158,20 @@ declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixi
    */
   value: number[];
 
+  /**
+   * 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: string | null | undefined;
+
+  /**
+   * 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: string | null | undefined;
+
   addEventListener<K extends keyof RangeSliderEventMap>(
     type: K,
     listener: (this: RangeSlider, ev: RangeSliderEventMap[K]) => void,