@vaadin/slider 25.1.0-alpha2 → 25.1.0-alpha4

package/src/vaadin-slider-mixin.js

@@ -4,13 +4,15 @@
  * 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';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 
 /**
  * @polymerMixin
  * @mixes DisabledMixin
+ * @mixes SlotStylesMixin
  */
 export const SliderMixin = (superClass) =>
-  class SliderMixinClass extends DisabledMixin(superClass) {
+  class SliderMixinClass extends SlotStylesMixin(DisabledMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -56,17 +58,39 @@ export const SliderMixin = (superClass) =>
       };
     }
 
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+
+      return [
+        `
+          ${tag} > input::-webkit-slider-runnable-track {
+            height: 100%;
+          }
+
+          ${tag} > input::-webkit-slider-thumb {
+            appearance: none;
+            width: var(--_thumb-width);
+            height: 100%;
+            /* iOS needs these */
+            background: transparent;
+            box-shadow: none;
+          }
+
+          ${tag} > input::-moz-range-thumb {
+            border: 0;
+            background: transparent;
+            width: var(--_thumb-width);
+            height: 100%;
+          }
+        `,
+      ];
+    }
+
     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 */
@@ -76,14 +100,6 @@ export const SliderMixin = (superClass) =>
       this.__lastCommittedValue = this.value;
     }
 
-    /**
-     * @param {Event} event
-     * @return {number}
-     */
-    __getThumbIndex(_event) {
-      return 0;
-    }
-
     /**
      * @param {number} value
      * @param {number} index
@@ -102,7 +118,9 @@ export const SliderMixin = (superClass) =>
       const nearestOffset = Math.round(offset / step) * step;
       const nearestValue = minValue + nearestOffset;
 
-      const newValue = Math.round(nearestValue);
+      // Ensure the last value matching step is used below the max limit.
+      // Example: max = 100, step = 1.5 - force maximum allowed value to 99.
+      const newValue = nearestValue <= maxValue ? nearestValue : nearestValue - step;
 
       this.__value = fullValue.with(index, newValue);
     }
@@ -126,39 +144,8 @@ export const SliderMixin = (superClass) =>
      */
     __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);
+      const safeValue = Math.min(Math.max(value, min), max);
+      return (safeValue - min) / (max - min);
     }
 
     /**
@@ -166,80 +153,16 @@ export const SliderMixin = (superClass) =>
      * @private
      */
     __onMouseDown(event) {
-      const part = event.composedPath()[0].getAttribute('part');
-      if (!part || (!part.startsWith('track') && !part.startsWith('thumb'))) {
+      if (!event.composedPath().includes(this.$.controls)) {
         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();
+      // Prevent modifying value when readonly
+      if (this.readonly) {
+        event.preventDefault();
       }
     }
 
-    /**
-     * @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)) {
@@ -248,16 +171,6 @@ export const SliderMixin = (superClass) =>
       }
     }
 
-    /**
-     * @param {Event} event
-     * @private
-     */
-    __onInput(event) {
-      const index = this.__getThumbIndex(event);
-      this.__updateValue(event.target.value, index);
-      this.__commitValue();
-    }
-
     /**
      * @param {Event} event
      * @private

package/src/vaadin-slider.d.ts

@@ -5,6 +5,7 @@
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { SliderMixin } from './vaadin-slider-mixin.js';
 
@@ -39,7 +40,7 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
  * @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)))) {
+declare class Slider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**
    * The value of the slider.
    */

package/src/vaadin-slider.js

@@ -10,6 +10,8 @@ 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 { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
+import { field } from '@vaadin/field-base/src/styles/field-base-styles.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';
@@ -29,12 +31,13 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes FieldMixin
  * @mixes FocusMixin
  * @mixes SliderMixin
  * @mixes ThemableMixin
  */
-class Slider extends SliderMixin(
-  FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+class Slider extends FieldMixin(
+  SliderMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
 ) {
   static get is() {
     return 'vaadin-slider';
@@ -42,15 +45,27 @@ class Slider extends SliderMixin(
 
   static get styles() {
     return [
+      field,
       sliderStyles,
       css`
         :host([focus-ring]) [part='thumb'] {
-          outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+          outline: var(--vaadin-focus-ring-width) var(--_outline-style, solid) var(--vaadin-focus-ring-color);
           outline-offset: 1px;
         }
 
-        :host([readonly][focus-ring]) [part~='thumb'] {
-          outline-style: dashed;
+        #controls {
+          grid-template-columns:
+            [track-start fill-start]
+            calc(var(--value) * var(--_track-width))
+            [fill-end thumb1]
+            var(--_thumb-width)
+            calc((1 - var(--value)) * var(--_track-width))
+            [track-end];
+        }
+
+        [part='track-fill'] {
+          border-start-start-radius: inherit;
+          border-end-start-radius: inherit;
         }
       `,
     ];
@@ -60,6 +75,10 @@ class Slider extends SliderMixin(
     return 'sliderComponent';
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   static get properties() {
     return {
       /**
@@ -80,17 +99,28 @@ class Slider extends SliderMixin(
     const percent = this.__getPercentFromValue(value);
 
     return html`
-      <div part="track">
-        <div
-          part="track-fill"
-          style="${styleMap({
-            insetInlineStart: 0,
-            insetInlineEnd: `${100 - percent}%`,
-          })}"
-        ></div>
+      <div class="vaadin-slider-container">
+        <div part="label" @click="${this.focus}">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true"></span>
+        </div>
+
+        <div id="controls" style="${styleMap({ '--value': percent })}">
+          <div part="track">
+            <div part="track-fill"></div>
+          </div>
+          <div part="thumb"></div>
+          <slot name="input"></slot>
+        </div>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
-      <div part="thumb" style="${styleMap({ insetInlineStart: `${percent}%` })}"></div>
-      <slot name="input"></slot>
     `;
   }
 
@@ -107,6 +137,7 @@ class Slider extends SliderMixin(
 
     const input = this.querySelector('[slot="input"]');
     this._inputElement = input;
+    this.ariaTarget = input;
   }
 
   /**
@@ -146,7 +177,7 @@ class Slider extends SliderMixin(
   updated(props) {
     super.updated(props);
 
-    if (props.has('value') || props.has('min') || props.has('max')) {
+    if (props.has('value') || props.has('min') || props.has('max') || props.has('step')) {
       this.__updateValue(this.value);
     }
   }
@@ -168,6 +199,16 @@ class Slider extends SliderMixin(
     super.focus(options);
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  blur() {
+    if (this._inputElement) {
+      this._inputElement.blur();
+    }
+  }
+
   /**
    * @private
    * @override
@@ -176,6 +217,12 @@ class Slider extends SliderMixin(
     this.value = this.__value[0];
   }
 
+  /** @private */
+  __onInput(event) {
+    this.__updateValue(event.target.value, 0);
+    this.__commitValue();
+  }
+
   /** @private */
   __onKeyDown(event) {
     const arrowKeys = ['ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp'];