feat: add minMaxVisible property to slider and range-slider

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

@@ -33,6 +33,15 @@ export const sliderStyles = css`
     --_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;
@@ -101,4 +110,16 @@ export const sliderStyles = css`
     outline: 0;
     -webkit-tap-highlight-color: transparent;
   }
+
+  [part='marks'] {
+    display: none;
+    font-size: 0.75em;
+    color: var(--vaadin-secondary-text-color);
+  }
+
+  :host([min-max-visible]) [part='marks'] {
+    grid-area: marks;
+    display: flex;
+    justify-content: space-between;
+  }
 `;

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

@@ -74,19 +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-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
+ * 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:
  *

packages/slider/src/vaadin-range-slider.js

@@ -43,19 +43,23 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * `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-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
+ * 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:
  *
@@ -276,6 +280,7 @@ class RangeSlider extends FieldMixin(
 
     const startPercent = this.__getPercentFromValue(startValue);
     const endPercent = this.__getPercentFromValue(endValue);
+    const { min, max } = this.__getConstraints();
 
     return html`
       <div class="vaadin-slider-container">
@@ -294,6 +299,11 @@ class RangeSlider extends FieldMixin(
           <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">
           <slot name="helper"></slot>
         </div>

packages/slider/src/vaadin-slider-mixin.d.ts

@@ -41,4 +41,10 @@ export declare class SliderMixinClass {
    * @attr {boolean} value-always-visible
    */
   valueAlwaysVisible: boolean;
+
+  /**
+   * When true, displays the min and max values below the slider track.
+   * @attr {boolean} min-max-visible
+   */
+  minMaxVisible: boolean;
 }

packages/slider/src/vaadin-slider-mixin.js

@@ -61,6 +61,15 @@ export const SliderMixin = (superClass) =>
           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,

packages/slider/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:
  *

packages/slider/src/vaadin-slider.js

@@ -41,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:
  *
@@ -179,6 +183,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">
@@ -196,6 +201,11 @@ class Slider extends FieldMixin(
           <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">
           <slot name="helper"></slot>
         </div>