mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +00:00
Extend paper-slider to fix rounding issue. (#1709)
This commit is contained in:
parent
458a7827f9
commit
3961eff372
31
src/components/ha-slider.js
Normal file
31
src/components/ha-slider.js
Normal file
@ -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);
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user