feat(slider): adds explicit multi-value support via range=true, valueStart, valueEnd

PiperOrigin-RevId: 533264226

Author: material-web-copybara

slider/demo/demo.ts

@@ -8,16 +8,18 @@ import './index.js';
 import './material-collection.js';
 
 import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, Knob, numberInput, textInput} from './index.js';
+import {boolInput, Knob, numberInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
 const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Slider', [
-      new Knob('value', {ui: numberInput(), defaultValue: 5}),
-      new Knob('multivalue.value', {ui: textInput(), defaultValue: '5, 10'}),
+      new Knob('value', {ui: numberInput(), defaultValue: 50}),
+      new Knob('range', {ui: boolInput(), defaultValue: false}),
+      new Knob('valueStart', {ui: numberInput(), defaultValue: 30}),
+      new Knob('valueEnd', {ui: numberInput(), defaultValue: 70}),
       new Knob('min', {ui: numberInput(), defaultValue: 0}),
-      new Knob('max', {ui: numberInput(), defaultValue: 25}),
+      new Knob('max', {ui: numberInput(), defaultValue: 100}),
       new Knob('step', {ui: numberInput(), defaultValue: 1}),
       new Knob('withTickMarks', {ui: boolInput(), defaultValue: false}),
       new Knob('withLabel', {ui: boolInput(), defaultValue: false}),

slider/demo/stories.ts

@@ -13,10 +13,12 @@ import {css, html} from 'lit';
 /** Knob types for slider stories. */
 export interface StoryKnobs {
   value: number;
-  'multivalue.value': string;
+  valueStart: number;
+  valueEnd: number;
   min: number;
   max: number;
   step: number;
+  range: boolean;
   withTickMarks: boolean;
   withLabel: boolean;
   disabled: boolean;
@@ -36,10 +38,13 @@ const standard: MaterialStoryInit<StoryKnobs> = {
     return html`
       <label>label
         <md-slider
-            value=${knobs.value}
+            .value=${knobs.value}
+            .valueStart=${knobs.valueStart}
+            .valueEnd=${knobs.valueEnd}
             .min=${knobs.min}
             .max=${knobs.max}
             .step=${knobs.step ?? 1}
+            .range=${knobs.range}
             .withTickMarks=${knobs.withTickMarks}
             .withLabel=${knobs.withLabel ?? false}
             .disabled=${knobs.disabled ?? false}
@@ -54,12 +59,10 @@ const multiValue: MaterialStoryInit<StoryKnobs> = {
   render(knobs) {
     return html`
       <label>label
-        <!--
-          Value can be a [number, number]|number but can convert string
-          attribtues separated by commas
-        -->
         <md-slider
-          value=${(knobs['multivalue.value']) as unknown as number}
+          range
+          .valueStart=${(knobs.valueStart)}
+          .valueEnd=${(knobs.valueEnd)}
           .min=${knobs.min}
           .max=${knobs.max}
           .step=${knobs.step ?? 1}
@@ -117,21 +120,21 @@ const customStyling: MaterialStoryInit<StoryKnobs> = {
     }
     function updateLabel(event: Event) {
       const target = event.target as MdSlider;
-      const {valueAsFraction} = target;
-      const hasValueRange = Array.isArray(valueAsFraction);
-      target.valueLabel = hasValueRange ?
-          [labelFor(valueAsFraction[0]), labelFor(valueAsFraction[1])] :
-          labelFor(valueAsFraction);
+      const {min, max, valueStart, valueEnd} = target;
+      const range = max - min;
+      const fractionStart = valueStart / range;
+      const fractionEnd = valueEnd / range;
+      target.valueStartLabel = labelFor(fractionStart);
+      target.valueEndLabel = labelFor(fractionEnd);
     }
     return html`
       <label>label
-        <!--
-          Value can be a [number, number]|number but can convert string
-          attribtues separated by commas
-        -->
         <md-slider
-          value=${(knobs['multivalue.value']) as unknown as number}
-          valueLabel=${`😔, 😌`}
+          range
+          .valueStart=${(knobs.valueStart)}
+          .valueEnd=${(knobs.valueEnd)}
+          .valueStartLabel=${'😔'}
+          .valueEndLabel=${'😌'}
           withTickMarks
           withLabel
           .min=${knobs.min}

slider/lib/slider.ts

@@ -34,25 +34,6 @@ function inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {
   return x >= left && x <= right && y >= top && y <= bottom;
 }
 
-// parse values like: foo or foo,bar
-function tupleConverter(attr: string|null) {
-  const [, v, e] =
-      attr?.match(/\s*\[?\s*([^,]+)(?:(?:\s*$)|(?:\s*,\s*(.*)\s*))/) ?? [];
-  return e !== undefined ? [v, e] : v;
-}
-
-function toNumber(value: string) {
-  return Number(value) || 0;
-}
-
-function tupleAsString(value: unknown|[unknown, unknown]) {
-  return Array.isArray(value) ? value.join() : String(value ?? '');
-}
-
-function valueConverter(attr: string|null) {
-  const value = tupleConverter(attr);
-  return Array.isArray(value) ? value.map(i => toNumber(i)) : toNumber(value);
-}
 
 function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value));
@@ -98,21 +79,40 @@ export class Slider extends LitElement {
   /**
    * The slider maximum value
    */
-  @property({type: Number}) max = 10;
+  @property({type: Number}) max = 100;
+
+  /**
+   * The slider value displayed when range is false.
+   */
+  @property({type: Number}) value = 50;
+
+  /**
+   * The slider start value displayed when range is true.
+   */
+  @property({type: Number}) valueStart = 25;
+
+  /**
+   * The slider end value displayed when range is true.
+   */
+  @property({type: Number}) valueEnd = 75;
+
+  /**
+   * An optional label for the slider's value displayed when range is
+   * false; if not set, the label is the value itself.
+   */
+  @property() valueLabel?: string|undefined;
 
   /**
-   * The slider value, can be a single number, or an array tuple indicating
-   * a start and end value.
+   * An optional label for the slider's start value displayed when
+   * range is true; if not set, the label is the valueStart itself.
    */
-  @property({converter: valueConverter}) value: number|[number, number] = 0;
+  @property() valueStartLabel?: string|undefined;
 
   /**
-   * An optinoal label for the slider's value; if not set, the label is the
-   * value itself. This can be a string or string tuple when start and end
-   * values are used.
+   * An optional label for the slider's end value displayed when
+   * range is true; if not set, the label is the valueEnd itself.
    */
-  @property({converter: tupleConverter})
-  valueLabel?: string|[string, string]|undefined;
+  @property() valueEndLabel?: string|undefined;
 
   /**
    * The step between values.
@@ -129,6 +129,13 @@ export class Slider extends LitElement {
    */
   @property({type: Boolean}) withLabel = false;
 
+  /**
+   * Whether or not to show a value range. When false, the slider displays
+   * a slideable handle for the value property; when true, it displays
+   * slideable handles for the valueStart and valueEnd properties.
+   */
+  @property({type: Boolean}) range = false;
+
   /**
    * The HTML name to use in form submission.
    */
@@ -141,17 +148,6 @@ export class Slider extends LitElement {
     return this.closest('form');
   }
 
-
-  /**
-   * Read only computed value representing the fraction between 0 and 1
-   * respresenting the value's position between min and max. This is a
-   * single fraction or a tuple if the value specifies start and end values.
-   */
-  get valueAsFraction() {
-    const {lowerFraction, upperFraction} = this.getMetrics();
-    return this.allowRange ? [lowerFraction, upperFraction] : upperFraction;
-  }
-
   private getMetrics() {
     const step = Math.max(this.step, 1);
     const range = Math.max(this.max - this.min, step);
@@ -210,38 +206,26 @@ export class Slider extends LitElement {
     this.inputB?.focus();
   }
 
-  get valueAsString() {
-    return tupleAsString(this.value);
-  }
-
   // value coerced to a string
   [getFormValue]() {
-    return this.valueAsString;
+    return this.range ? `${this.valueStart}, ${this.valueEnd}` :
+                                 `${this.value}`;
   }
 
-  // If range should be allowed (detected via value format).
-  private allowRange = false;
-
   // indicates input values are crossed over each other from initial rendering.
   private isFlipped() {
     return this.valueA > this.valueB;
   }
 
   protected override willUpdate(changed: PropertyValues) {
-    if (changed.has('value') || changed.has('min') || changed.has('max') ||
-        changed.has('step')) {
-      this.allowRange = Array.isArray(this.value);
-      const step = Math.max(this.step, 1);
-      let lower =
-          this.allowRange ? (this.value as [number, number])[0] : this.min;
-      lower = clamp(lower - (lower % step), this.min, this.max);
-      let upper = this.allowRange ? (this.value as [number, number])[1] :
-                                    this.value as number;
-      upper = clamp(upper - (upper % step), this.min, this.max);
-      const isFlipped = this.isFlipped() && this.allowRange;
-      this.valueA = isFlipped ? upper : lower;
-      this.valueB = isFlipped ? lower : upper;
-    }
+    const step = Math.max(this.step, 1);
+    let lower = this.range ? this.valueStart : this.min;
+    lower = clamp(lower - (lower % step), this.min, this.max);
+    let upper = this.range ? this.valueEnd : this.value;
+    upper = clamp(upper - (upper % step), this.min, this.max);
+    const isFlipped = this.isFlipped() && this.range;
+    this.valueA = isFlipped ? upper : lower;
+    this.valueB = isFlipped ? lower : upper;
 
     // manually handle ripple hover state since the handle is pointer events
     // none.
@@ -255,7 +239,7 @@ export class Slider extends LitElement {
   }
 
   protected override async updated(changed: PropertyValues) {
-    if (changed.has('value') || changed.has('valueA') ||
+    if (changed.has('range') || changed.has('valueA') ||
         changed.has('valueB')) {
       await this.updateComplete;
       this.handlesOverlapping = isOverlapping(this.handleA, this.handleB);
@@ -272,14 +256,19 @@ export class Slider extends LitElement {
       // for generating tick marks
       '--slider-tick-count': String(range / step),
     };
-    const containerClasses = {ranged: this.allowRange};
+    const containerClasses = {ranged: this.range};
 
     // optional label values to show in place of the value.
-    const labelA = String(this.valueLabel?.[isFlipped ? 1 : 0] ?? this.valueA);
-    const labelB = String(
-        (this.allowRange ? this.valueLabel?.[isFlipped ? 0 : 1] :
-                           this.valueLabel) ??
-        this.valueB);
+    let labelA = String(this.valueA);
+    let labelB = String(this.valueB);
+    if (this.range) {
+      const a = isFlipped ? this.valueEndLabel : this.valueStartLabel;
+      const b = isFlipped ? this.valueStartLabel : this.valueEndLabel;
+      labelA = a ?? labelA;
+      labelB = b ?? labelB;
+    } else {
+      labelB = this.valueLabel ?? labelB;
+    }
 
     const inputAProps = {
       id: 'a',
@@ -322,13 +311,14 @@ export class Slider extends LitElement {
         class="container ${classMap(containerClasses)}"
         style=${styleMap(containerStyles)}
       >
-        ${when(this.allowRange, () => this.renderInput(inputAProps))}
+        ${when(this.range, () => this.renderInput(inputAProps))}
         ${this.renderInput(inputBProps)}
         ${this.renderTrack()}
         <div class="handleContainerPadded">
           <div class="handleContainerBlock">
             <div class="handleContainer ${classMap(handleContainerClasses)}">
-              ${when(this.allowRange, () => this.renderHandle(handleAProps))}
+              ${
+        when(this.range, () => this.renderHandle(handleAProps))}
               ${this.renderHandle(handleBProps)}
             </div>
           </div>
@@ -379,7 +369,7 @@ export class Slider extends LitElement {
   }) {
     // when ranged, ensure announcement includes value info.
     const ariaLabelDescriptor =
-        this.allowRange ? ` - ${lesser ? `start` : `end`} handle` : '';
+        this.range ? ` - ${lesser ? `start` : `end`} handle` : '';
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`<input type="range"
@@ -507,7 +497,12 @@ export class Slider extends LitElement {
     // update value only on interaction
     const lower = Math.min(this.valueA, this.valueB);
     const upper = Math.max(this.valueA, this.valueB);
-    this.value = this.allowRange ? [lower, upper] : this.valueB;
+    if (this.range) {
+      this.valueStart = lower;
+      this.valueEnd = upper;
+    } else {
+      this.value = this.valueB;
+    }
   }
 
   private handleChange(event: Event) {