fix(demos): Sanitize slider input values (#2018)

The demo page now checks that the user's input values are finite numbers before assigning them to any of the component's setter properties. This prevents an error from being thrown when the user deletes all the text in one of the inputs (which is a fairly common thing to do before entering a new number).

In addition, to make it clearer that the slider supports negative numbers for `min` and `max`, the demo page now allows those input values to go down to `-100` (previously they had a lower bound of `0`).

demos/slider.html

@@ -219,11 +219,11 @@ <h2>Custom Colored Discrete Slider with Tick Marks</h2>
         <div class="demo-param-field-group">
           <label class="demo-param-field">
             <span class="demo-param-input-label">Min:</span>
-            <input name="min" type="number" min="0" max="100" value="0">
+            <input name="min" type="number" min="-100" max="100" value="0">
           </label>
           <label class="demo-param-field">
-            <div class="demo-param-input-label">Max:</div>
-            <input name="max" type="number" min="0" max="100" value="50">
+            <span class="demo-param-input-label">Max:</span>
+            <input name="max" type="number" min="-100" max="100" value="50">
           </label>
           <label class="demo-param-field">
             <span class="demo-param-input-label">Step:</span>
@@ -256,9 +256,13 @@ <h2>Custom Colored Discrete Slider with Tick Marks</h2>
       demoReady(function() {
         mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
 
+        var numberIsFinite = Number.isFinite || function(value) {
+          return typeof value === 'number' && isFinite(value);
+        };
+
         var demoRoot = document.getElementById('slider-example')
-        var min = demoRoot.querySelector('[name="min"]');
-        var max = demoRoot.querySelector('[name="max"]');
+        var minInput = demoRoot.querySelector('[name="min"]');
+        var maxInput = demoRoot.querySelector('[name="max"]');
         var step = demoRoot.querySelector('[name="step"]');
         var darkTheme = demoRoot.querySelector('[name="dark-theme"]');
         var disabled = demoRoot.querySelector('[name="disabled"]');
@@ -309,25 +313,37 @@ <h2>Custom Colored Discrete Slider with Tick Marks</h2>
           customDiscreteWMarkerCommittedValue.textContent = customDiscreteWMarkerSlider.value;
         });
 
-        min.addEventListener('input', function() {
-          continuousSlider.min = parseFloat(min.value);
-          discreteSlider.min = parseFloat(min.value);
-          discreteWMarkerSlider.min = parseFloat(min.value);
-          customDiscreteWMarkerSlider.min = parseFloat(min.value);
+        minInput.addEventListener('input', function() {
+          var minValue = parseFloat(minInput.value);
+          if (!numberIsFinite(minValue)) {
+            return;
+          }
+          continuousSlider.min = minValue;
+          discreteSlider.min = minValue;
+          discreteWMarkerSlider.min = minValue;
+          customDiscreteWMarkerSlider.min = minValue;
         });
 
-        max.addEventListener('input', function() {
-          continuousSlider.max = parseFloat(max.value);
-          discreteSlider.max = parseFloat(max.value);
-          discreteWMarkerSlider.max = parseFloat(max.value);
-          customDiscreteWMarkerSlider.max = parseFloat(max.value);
+        maxInput.addEventListener('input', function() {
+          var maxValue = parseFloat(maxInput.value);
+          if (!numberIsFinite(maxValue)) {
+            return;
+          }
+          continuousSlider.max = maxValue;
+          discreteSlider.max = maxValue;
+          discreteWMarkerSlider.max = maxValue;
+          customDiscreteWMarkerSlider.max = maxValue;
         });
 
         step.addEventListener('input', function() {
-          continuousSlider.step = parseFloat(step.value);
-          discreteSlider.step = parseFloat(step.value);
-          discreteWMarkerSlider.step = parseFloat(step.value);
-          customDiscreteWMarkerSlider.step = parseFloat(step.value);
+          var stepValue = parseFloat(step.value);
+          if (!numberIsFinite(stepValue)) {
+            return;
+          }
+          continuousSlider.step = stepValue;
+          discreteSlider.step = stepValue;
+          discreteWMarkerSlider.step = stepValue;
+          customDiscreteWMarkerSlider.step = stepValue;
         });
 
         darkTheme.addEventListener('change', function() {