fix(slider): Don't throw error when markup min is greater than default max

packages/mdc-slider/index.js

@@ -183,8 +183,19 @@ class MDCSlider extends MDCComponent {
 
   initialSyncWithDOM() {
     const origValueNow = parseFloat(this.root_.getAttribute(strings.ARIA_VALUENOW));
-    this.min = parseFloat(this.root_.getAttribute(strings.ARIA_VALUEMIN)) || this.min;
-    this.max = parseFloat(this.root_.getAttribute(strings.ARIA_VALUEMAX)) || this.max;
+    const min = parseFloat(this.root_.getAttribute(strings.ARIA_VALUEMIN)) || this.min;
+    const max = parseFloat(this.root_.getAttribute(strings.ARIA_VALUEMAX)) || this.max;
+
+    // min and max need to be set in the right order to avoid throwing an error
+    // when the new min is greater than the default max.
+    if (min >= this.max) {
+      this.max = max;
+      this.min = min;
+    } else {
+      this.min = min;
+      this.max = max;
+    }
+
     this.step = parseFloat(this.root_.getAttribute(strings.STEP_DATA_ATTR)) || this.step;
     this.value = origValueNow || this.value;
     this.disabled = (

test/unit/mdc-slider/mdc-slider.test.js

@@ -155,6 +155,16 @@ test('#initialSyncWithDOM adds an aria-valuemax attribute if not present', () =>
   assert.equal(root.getAttribute('aria-valuemax'), String(component.max));
 });
 
+test('#initialSyncWithDOM syncs a custom range with aria-valuemin and aria-valuemax', () => {
+  const root = getFixture();
+  root.setAttribute('aria-valuemin', '2001');
+  root.setAttribute('aria-valuemax', '2017');
+
+  const component = new MDCSlider(root);
+  assert.equal(component.min, 2001);
+  assert.equal(component.max, 2017);
+});
+
 test('#initialSyncWithDOM syncs the value property with aria-valuenow for continuous slider', () => {
   const root = getFixture();
   root.setAttribute('aria-valuenow', '30');