Extend paper-slider to fix rounding issue. (#1709)

src/components/ha-slider.js

@@ -0,0 +1,31 @@
+import '@polymer/paper-slider';
+
+const PaperSliderClass = customElements.get('paper-slider');
+
+class HaSlider extends PaperSliderClass {
+  _calcStep(value) {
+    if (!this.step) {
+      return parseFloat(value);
+    }
+
+    const numSteps = Math.round((value - this.min) / this.step);
+    const stepStr = this.step.toString();
+    const stepPointAt = stepStr.indexOf('.');
+    if (stepPointAt !== -1) {
+      /**
+       * For small values of this.step, if we calculate the step using
+       * For non-integer values of this.step, if we calculate the step using
+       * `Math.round(value / step) * step` we may hit a precision point issue
+       * eg. 0.1 * 0.2 =  0.020000000000000004
+       * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
+       *
+       * as a work around we can round with the decimal precision of `step`
+       */
+      const precision = 10 ** (stepStr.length - stepPointAt - 1);
+      return Math.round((numSteps * this.step + this.min) * precision) / precision;
+    }
+
+    return numSteps * this.step + this.min;
+  }
+}
+customElements.define('ha-slider', HaSlider);

src/panels/lovelace/entity-rows/hui-input-number-entity-row.js

@@ -1,11 +1,11 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-slider/paper-slider.js';
 import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 
 import '../components/hui-generic-entity-row.js';
+import '../../../components/ha-slider';
 
 class HuiInputNumberEntityRow extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
   static get template() {
@@ -44,7 +44,7 @@ class HuiInputNumberEntityRow extends mixinBehaviors([IronResizableBehavior], Po
       <div>
         <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'slider')]]">
           <div class="flex">
-            <paper-slider
+            <ha-slider
               min="[[_min]]"
               max="[[_max]]"
               value="{{_value}}"
@@ -52,7 +52,7 @@ class HuiInputNumberEntityRow extends mixinBehaviors([IronResizableBehavior], Po
               pin
               on-change="_selectedValueChanged"
               ignore-bar-touch
-            ></paper-slider>
+            ></ha-slider>
             <span class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</span>
           </div>
         </template>

src/state-summary/state-card-input_number.js

@@ -1,12 +1,12 @@
 import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-slider/paper-slider.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-info.js';
+import '../components/ha-slider';
 
 class StateCardInputNumber extends mixinBehaviors([
   IronResizableBehavior
@@ -15,7 +15,7 @@ class StateCardInputNumber extends mixinBehaviors([
     return html`
     <style include="iron-flex iron-flex-alignment"></style>
     <style>
-      paper-slider {
+      ha-slider {
         margin-left: auto;
       }
       .state {
@@ -28,7 +28,7 @@ class StateCardInputNumber extends mixinBehaviors([
       .sliderstate {
           min-width: 45px;
       }
-      paper-slider[hidden] {
+      ha-slider[hidden] {
         display: none !important;
       }
       paper-input {
@@ -39,7 +39,7 @@ class StateCardInputNumber extends mixinBehaviors([
 
     <div class="horizontal justified layout" id="input_number_card">
       ${this.stateInfoTemplate}
-      <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" step="[[step]]" hidden="[[hiddenslider]]" pin="" on-change="selectedValueChanged" on-click="stopPropagation" id="slider" ignore-bar-touch="">
+      <ha-slider min="[[min]]" max="[[max]]" value="{{value}}" step="[[step]]" hidden="[[hiddenslider]]" pin="" on-change="selectedValueChanged" on-click="stopPropagation" id="slider" ignore-bar-touch="">
       </paper-slider>
       <paper-input no-label-float="" auto-validate="" pattern="[0-9]+([\\.][0-9]+)?" step="[[step]]" min="[[min]]" max="[[max]]" value="{{value}}" type="number" on-change="selectedValueChanged" on-click="stopPropagation" hidden="[[hiddenbox]]">
       </paper-input>