vaadin · web-padawan · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026
diff --git a/dev/range-slider.html b/dev/range-slider.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Range Slider</title>
+    <script type="module" src="./common.js"></script>
+  </head>
+  <body>
+    <vaadin-range-slider></vaadin-range-slider>
+
+    <script type="module">
+      import '@vaadin/slider/vaadin-range-slider.js';
+    </script>
+  </body>
+</html>
diff --git a/dev/slider.html b/dev/slider.html
@@ -6,11 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slider</title>
     <script type="module" src="./common.js"></script>
+  </head>
+  <body>
+    <vaadin-slider></vaadin-slider>
+
     <script type="module">
       import '@vaadin/slider';
     </script>
-  </head>
-  <body>
-    <vaadin-slider min="0" max="100" value="50"></vaadin-slider>
   </body>
 </html>
diff --git a/packages/slider/src/styles/vaadin-slider-base-styles.js b/packages/slider/src/styles/vaadin-slider-base-styles.js
@@ -8,10 +8,49 @@ import { css } from 'lit';
 
 export const sliderStyles = css`
   :host {
-    display: block;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: var(--_thumb-size);
+    user-select: none;
+    -webkit-user-select: none;
+    border-radius: var(--vaadin-slider-track-border-radius, var(--vaadin-radius-m));
+    --_thumb-size: var(--vaadin-slider-thumb-size, 1lh);
+    --_track-size: var(--vaadin-slider-track-size, 0.25lh);
   }
 
   :host([hidden]) {
     display: none !important;
   }
+
+  [part='track'] {
+    box-sizing: border-box;
+    position: absolute;
+    height: var(--_track-size);
+    width: 100%;
+    background: var(--vaadin-slider-track-background, var(--vaadin-background-container));
+    border-radius: inherit;
+  }
+
+  [part='track-fill'] {
+    box-sizing: border-box;
+    position: absolute;
+    height: var(--_track-size);
+    background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+
+  [part~='thumb'] {
+    position: absolute;
+    box-sizing: border-box;
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+    transform: translateX(-50%);
+    background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
+    border-radius: 50%;
+    touch-action: none;
+  }
 `;
diff --git a/packages/slider/src/vaadin-range-slider.js b/packages/slider/src/vaadin-range-slider.js
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
+import { styleMap } from 'lit/directives/style-map.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';
@@ -42,7 +43,7 @@ class RangeSlider extends SliderMixin(ElementMixin(ThemableMixin(PolylitMixin(Lu
        */
       value: {
         type: Array,
-        value: () => [],
+        value: () => [0, 100],
         notify: true,
         sync: true,
       },
@@ -51,14 +52,43 @@ class RangeSlider extends SliderMixin(ElementMixin(ThemableMixin(PolylitMixin(Lu
 
   /** @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"></div>
+        <div
+          part="track-fill"
+          style="${styleMap({
+            insetInlineStart: `${startPercent}%`,
+            insetInlineEnd: `${100 - endPercent}%`,
+          })}"
+        ></div>
       </div>
-      <div part="thumb thumb-start"></div>
-      <div part="thumb thumb-end"></div>
+      <div part="thumb thumb-start" style="${styleMap({ insetInlineStart: `${startPercent}%` })}"></div>
+      <div part="thumb thumb-end" style="${styleMap({ insetInlineStart: `${endPercent}%` })}"></div>
     `;
   }
+
+  constructor() {
+    super();
+
+    this.__value = [...this.value];
+  }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('value') || props.has('min') || props.has('max')) {
+      const value = Array.isArray(this.value) ? this.value : [];
+      value.forEach((value, idx) => {
+        this.__updateValue(value, idx);
+      });
+    }
+  }
 }
 
 defineCustomElement(RangeSlider);

diff --git a/packages/slider/src/vaadin-slider-mixin.js b/packages/slider/src/vaadin-slider-mixin.js
@@ -16,13 +16,15 @@ export const SliderMixin = (superClass) =>
          */
         min: {
           type: Number,
+          sync: true,
         },
 
         /**
          * The maximum allowed value.
          */
         max: {
           type: Number,
+          sync: true,
         },
 
         /**
@@ -31,6 +33,62 @@ export const SliderMixin = (superClass) =>
         step: {
           type: Number,
         },
+
+        /** @private */
+        __value: {
+          type: Array,
+          sync: true,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.__thumbIndex = 0;
+    }
+
+    /**
+     * @param {number} value
+     * @param {number} index
+     * @private
+     */
+    __updateValue(value, index = this.__thumbIndex) {
+      const { min, max } = this.__getConstraints();
+      const step = this.step || 1;
+
+      const minValue = this.__value[index - 1] || min;
+      const maxValue = this.__value[index + 1] || max;
+
+      const safeValue = Math.min(Math.max(value, minValue), maxValue);
+
+      const offset = safeValue - min;
+      const nearestOffset = Math.round(offset / step) * step;
+      const nearestValue = min + nearestOffset;
+
+      const newValue = Math.round(nearestValue);
+
+      this.__value = this.__value.with(index, newValue);
+    }
+
+    /**
+     * @return {{ min: number, max: number}}
+     * @private
+     */
+    __getConstraints() {
+      return {
+        min: this.min || 0,
+        max: this.max || 100,
       };
     }
+
+    /**
+     * @param {number} value
+     * @return {number}
+     * @protected
+     */
+    __getPercentFromValue(value) {
+      const { min, max } = this.__getConstraints();
+      return (100 * (value - min)) / (max - min);
+    }
   };
diff --git a/packages/slider/src/vaadin-slider.js b/packages/slider/src/vaadin-slider.js
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
+import { styleMap } from 'lit/directives/style-map.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';
@@ -42,6 +43,7 @@ class Slider extends SliderMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
        */
       value: {
         type: Number,
+        value: 0,
         notify: true,
         sync: true,
       },
@@ -50,13 +52,37 @@ class Slider extends SliderMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
 
   /** @protected */
   render() {
+    const [value] = this.__value;
+    const percent = this.__getPercentFromValue(value);
+
     return html`
       <div part="track">
-        <div part="track-fill"></div>
+        <div
+          part="track-fill"
+          style="${styleMap({
+            insetInlineStart: 0,
+            insetInlineEnd: `${100 - percent}%`,
+          })}"
+        ></div>
       </div>
-      <div part="thumb"></div>
+      <div part="thumb" style="${styleMap({ insetInlineStart: `${percent}%` })}"></div>
     `;
   }
+
+  constructor() {
+    super();
+
+    this.__value = [this.value];
+  }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('value') || props.has('min') || props.has('max')) {
+      this.__updateValue(this.value);
+    }
+  }
 }
 
 defineCustomElement(Slider);