feat(slider): Modify continuous slider to use step value by default, and give clients the option to customize step value for continuous sliders.

We'll soon switch to use input of type="range", which has a step value of 1 by default. To be consistent with the native range input, all sliders should have a step value. Clients can adjust the step size according to their applications' needs.

PiperOrigin-RevId: 343328805

Author: joyzhong

packages/mdc-slider/README.md

@@ -87,6 +87,10 @@ There are two types of sliders:
 Continuous sliders allow users to make meaningful selections that don’t require
 a specific value.
 
+Note: The step size for value quantization is, by default, 1. To specify
+a custom step size, provide a value for the `step` attribute on the `input`
+element.
+
 <img src="images/continuous-slider.png" alt="Continuous slider with a value of 50">
 
 ```html
@@ -138,14 +142,12 @@ allows a user to select an exact value.
 To create a discrete slider, add the following:
 
 *   `mdc-slider--discrete` class on the root element.
-*   `data-step` attribute on the root element. This will be the step size for
-    value quantization. If not set, the default is 1.
 *   Value indicator element (`mdc-slider__value-indicator-container`), as shown
     below.
 
 ```html
-<div class="mdc-slider mdc-slider--discrete" data-step="10">
-  <input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume">
+<div class="mdc-slider mdc-slider--discrete">
+  <input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume" step="10">
   <div class="mdc-slider__track">
     <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__track--active">
@@ -181,8 +183,8 @@ To add tick marks to a discrete slider, add the following:
     elements as children of the `mdc-slider__tick-marks` element
 
 ```html
-<div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks" data-step="10">
-  <input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume">
+<div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks">
+  <input class="mdc-slider__input" type="hidden" min="0" max="100" value="50" name="volume" step="10">
   <div class="mdc-slider__track">
     <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__track--active">
@@ -218,7 +220,7 @@ To add tick marks to a discrete slider, add the following:
 #### Discrete range slider
 
 ```html
-<div class="mdc-slider mdc-slider--range mdc-slider--discrete" data-step="10">
+<div class="mdc-slider mdc-slider--range mdc-slider--discrete">
   <input class="mdc-slider__input" type="hidden" min="0" max="50" value="20" step="10" name="rangeStart">
   <input class="mdc-slider__input" type="hidden" min="20" max="100" value="50" step="10" name="rangeEnd">
   <div class="mdc-slider__track">

packages/mdc-slider/constants.ts

@@ -44,6 +44,8 @@ export const cssClasses = {
 
 /** Slider numbers. */
 export const numbers = {
+  // Default step size.
+  STEP_SIZE: 1,
   // Default factor to multiply `step` by for big step value, if
   // `DATA_ATTR_BIG_STEP` is not set.
   BIG_STEP_FACTOR: 4,
@@ -63,7 +65,6 @@ export const attributes = {
   ARIA_VALUETEXT: 'aria-valuetext',
   // Step value to increment/decrement by for PAGE_UP or PAGE_DOWN keypresses.
   DATA_ATTR_BIG_STEP: 'data-big-step',
-  DATA_ATTR_STEP: 'data-step',
   INPUT_DISABLED: 'disabled',
   INPUT_MIN: 'min',
   INPUT_MAX: 'max',

packages/mdc-slider/foundation.ts

@@ -58,8 +58,7 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
   private isDisabled = false;
 
   private isDiscrete = false;
-  // Step value for discrete sliders.
-  private step = 1;
+  private step = numbers.STEP_SIZE;
   private bigStep = this.step * numbers.BIG_STEP_FACTOR;
   private hasTickMarks = false;
 
@@ -189,24 +188,24 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
     this.valueBeforeDownEvent = value;
     this.valueStartBeforeDownEvent = valueStart;
 
-    if (this.isDiscrete) {
-      const step = this.convertAttributeValueToNumber(
-          this.adapter.getAttribute(attributes.DATA_ATTR_STEP),
-          attributes.DATA_ATTR_STEP);
-      if (step <= 0) {
-        throw new Error(
-            `MDCSliderFoundation: step must be a positive number. ` +
-            `Current step: ${step}`);
-      }
-      this.step = step;
-
-      const bigStep = this.adapter.getAttribute(attributes.DATA_ATTR_BIG_STEP);
-      this.bigStep = bigStep !== null ?
-          this.convertAttributeValueToNumber(
-              bigStep, attributes.DATA_ATTR_BIG_STEP) :
-          step * numbers.BIG_STEP_FACTOR;
+    const stepAttr =
+        this.adapter.getInputAttribute(attributes.INPUT_STEP, Thumb.END);
+    if (stepAttr) {
+      this.step =
+          this.convertAttributeValueToNumber(stepAttr, attributes.INPUT_STEP);
+    }
+    if (this.step <= 0) {
+      throw new Error(
+          `MDCSliderFoundation: step must be a positive number. ` +
+          `Current step: ${this.step}`);
     }
 
+    const bigStep = this.adapter.getAttribute(attributes.DATA_ATTR_BIG_STEP);
+    this.bigStep = bigStep !== null ?
+        this.convertAttributeValueToNumber(
+            bigStep, attributes.DATA_ATTR_BIG_STEP) :
+        this.step * numbers.BIG_STEP_FACTOR;
+
     this.mousedownOrTouchstartListener =
         this.handleMousedownOrTouchstart.bind(this);
     this.moveListener = this.handleMove.bind(this);
@@ -710,10 +709,10 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
     // Fit the percentage complete between the range [min,max]
     // by remapping from [0, 1] to [min, min+(max-min)].
     const value = this.min + pctComplete * (this.max - this.min);
-    if (this.isDiscrete && value !== this.max && value !== this.min) {
-      return this.quantize(value);
+    if (value === this.max || value === this.min) {
+      return value;
     }
-    return value;
+    return this.quantize(value);
   }
 
   /**

packages/mdc-slider/test/component.test.ts

@@ -614,9 +614,9 @@ describe('MDCSlider', () => {
 
     beforeEach(() => {
       root = getFixture(html`
-        <div class="mdc-slider mdc-slider--discrete" data-step="10">
+        <div class="mdc-slider mdc-slider--discrete">
           <input class="mdc-slider__input" type="hidden" min="0" max="100"
-                        value="70">
+                        value="70" step="10">
           <div class="mdc-slider__track">
             <div class="mdc-slider__track--active">
               <div class="mdc-slider__track--active_fill"
@@ -706,8 +706,6 @@ function setUpTest(
 } {
   const discreteClass = isDiscrete ? cssClasses.DISCRETE : '';
   const rangeClass = isRange ? cssClasses.RANGE : '';
-  const dataStepAttr =
-      isDiscrete ? `${attributes.DATA_ATTR_STEP}="${step || 1}"` : '';
   const tickMarksClass = hasTickMarks ? cssClasses.TICK_MARKS : '';
 
   const input =
@@ -742,8 +740,7 @@ function setUpTest(
                                    '';
 
   const root = getFixture(html`
-    <div class="mdc-slider ${discreteClass} ${rangeClass} ${tickMarksClass}" ${
-      dataStepAttr}>
+    <div class="mdc-slider ${discreteClass} ${rangeClass} ${tickMarksClass}">
       ${inputStart}
       ${inputEnd}
       <div class="mdc-slider__track">

packages/mdc-slider/test/foundation.test.ts

@@ -1594,10 +1594,8 @@ function setUpAndInit({
         .and.returnValue(String(value));
   }
 
-  if (isDiscrete) {
-    mockAdapter.getAttribute.withArgs(attributes.DATA_ATTR_STEP)
-        .and.returnValue(step || 1);
-  }
+  mockAdapter.getInputAttribute.withArgs(attributes.INPUT_STEP, Thumb.END)
+      .and.returnValue(step || numbers.STEP_SIZE);
   if (bigStep !== undefined) {
     mockAdapter.getAttribute.withArgs(attributes.DATA_ATTR_BIG_STEP)
         .and.returnValue(bigStep);