@vaadin/slider 25.1.0-alpha3 → 25.1.0-alpha5

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
@@ -128,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);
     }
 
     /**
@@ -168,78 +153,19 @@ export const SliderMixin = (superClass) =>
      * @private
      */
     __onMouseDown(event) {
-      const part = event.composedPath()[0].getAttribute('part');
-      if (!part || (!part.startsWith('track') && !part.startsWith('thumb'))) {
-        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'))) {
+      if (!event.composedPath().includes(this.$.controls)) {
         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 */
+    __dispatchInputEvent() {
+      this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     }
 
     /** @private */
@@ -250,16 +176,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
@@ -269,6 +185,12 @@ export const SliderMixin = (superClass) =>
       this.__detectAndDispatchChange();
     }
 
+    /**
+     * Fired when the slider value changes during user interaction.
+     *
+     * @event input
+     */
+
     /**
      * Fired when the user commits a value change.
      *

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';
 
@@ -15,17 +16,39 @@ export type SliderChangeEvent = Event & {
   target: Slider;
 };
 
+/**
+ * Fired when the slider value changes during user interaction.
+ */
+export type SliderInputEvent = Event & {
+  target: Slider;
+};
+
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type SliderInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `value` property changes.
  */
 export type SliderValueChangedEvent = CustomEvent<{ value: number }>;
 
+/**
+ * Fired whenever the slider is validated.
+ */
+export type SliderValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface SliderCustomEventMap {
+  'invalid-changed': SliderInvalidChangedEvent;
+
   'value-changed': SliderValueChangedEvent;
+
+  validated: SliderValidatedEvent;
 }
 
 export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMap {
   change: SliderChangeEvent;
+  input: SliderInputEvent;
 }
 
 /**
@@ -36,10 +59,58 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
  * <vaadin-slider min="0" max="100" step="1"></vaadin-slider>
  * ```
  *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|-----------------
+ * `label`              | The label element
+ * `required-indicator` | The required indicator element
+ * `helper-text`        | The helper text element
+ * `error-message`      | The error message element
+ * `track`              | The slider track
+ * `track-fill`         | The filled portion of the track
+ * `thumb`              | The slider thumb
+ *
+ * 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
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                          |
+ * :--------------------------------------------|
+ * `--vaadin-field-default-width`               |
+ * `--vaadin-input-field-error-color`           |
+ * `--vaadin-input-field-error-font-size`       |
+ * `--vaadin-input-field-error-font-weight`     |
+ * `--vaadin-input-field-helper-color`          |
+ * `--vaadin-input-field-helper-font-size`      |
+ * `--vaadin-input-field-helper-font-weight`    |
+ * `--vaadin-input-field-label-color`           |
+ * `--vaadin-input-field-label-font-size`       |
+ * `--vaadin-input-field-label-font-weight`     |
+ * `--vaadin-input-field-required-indicator`    |
+ * `--vaadin-slider-fill-background`            |
+ * `--vaadin-slider-thumb-height`               |
+ * `--vaadin-slider-thumb-width`                |
+ * `--vaadin-slider-track-background`           |
+ * `--vaadin-slider-track-border-radius`        |
+ * `--vaadin-slider-track-height`               |
+ *
+ * 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.
  */
-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';
@@ -23,18 +25,67 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * <vaadin-slider min="0" max="100" step="1"></vaadin-slider>
  * ```
  *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|-----------------
+ * `label`              | The label element
+ * `required-indicator` | The required indicator element
+ * `helper-text`        | The helper text element
+ * `error-message`      | The error message element
+ * `track`              | The slider track
+ * `track-fill`         | The filled portion of the track
+ * `thumb`              | The slider thumb
+ *
+ * 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
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                          |
+ * :--------------------------------------------|
+ * `--vaadin-field-default-width`               |
+ * `--vaadin-input-field-error-color`           |
+ * `--vaadin-input-field-error-font-size`       |
+ * `--vaadin-input-field-error-font-weight`     |
+ * `--vaadin-input-field-helper-color`          |
+ * `--vaadin-input-field-helper-font-size`      |
+ * `--vaadin-input-field-helper-font-weight`    |
+ * `--vaadin-input-field-label-color`           |
+ * `--vaadin-input-field-label-font-size`       |
+ * `--vaadin-input-field-label-font-weight`     |
+ * `--vaadin-input-field-required-indicator`    |
+ * `--vaadin-slider-fill-background`            |
+ * `--vaadin-slider-thumb-height`               |
+ * `--vaadin-slider-thumb-width`                |
+ * `--vaadin-slider-track-background`           |
+ * `--vaadin-slider-track-border-radius`        |
+ * `--vaadin-slider-track-height`               |
+ *
+ * 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
  * @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 +93,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 +123,10 @@ class Slider extends SliderMixin(
     return 'sliderComponent';
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   static get properties() {
     return {
       /**
@@ -80,17 +147,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 +185,7 @@ class Slider extends SliderMixin(
 
     const input = this.querySelector('[slot="input"]');
     this._inputElement = input;
+    this.ariaTarget = input;
   }
 
   /**
@@ -168,6 +247,16 @@ class Slider extends SliderMixin(
     super.focus(options);
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  blur() {
+    if (this._inputElement) {
+      this._inputElement.blur();
+    }
+  }
+
   /**
    * @private
    * @override
@@ -176,6 +265,14 @@ class Slider extends SliderMixin(
     this.value = this.__value[0];
   }
 
+  /** @private */
+  __onInput(event) {
+    event.stopPropagation();
+    this.__updateValue(event.target.value, 0);
+    this.__dispatchInputEvent();
+    this.__commitValue();
+  }
+
   /** @private */
   __onKeyDown(event) {
     const arrowKeys = ['ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp'];