From 2c420a47e3d0775259402f628c542e320df89cdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 7 Sep 2018 10:52:51 +0200
Subject: [PATCH] Display value when sliding. Addresses #2

---
 slider-entity-row.js | 55 +++++++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/slider-entity-row.js b/slider-entity-row.js
index 99831a5..ac704e8 100644
--- a/slider-entity-row.js
+++ b/slider-entity-row.js
@@ -1,33 +1,51 @@
 class SliderEntityRow extends Polymer.Element {
   static get template() {
     let slider = Polymer.html`
-      <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
+      <paper-slider
+        min="[[min]]"
+        max="[[max]]"
+        value="{{value}}"
+        step="[[step]]"
+        pin
+        on-change="selectedValue"
+        ignore-bar-touch
+        on-click="stopPropagation">
+      </paper-slider>
       `
     return Polymer.html`
     <style>
       hui-generic-entity-row {
         margin: var(--ha-themed-slider-margin, initial);
       }
-      paper-slider {
-        margin-left: auto;
+      .flex {
+        display: flex;
+        align-items: center;
       }
       .second-line paper-slider {
         width: 100%;
       }
     </style>
-    <hui-generic-entity-row config="[[_config]]" hass="[[_hass]]">
-      <template is='dom-if' if='{{showTop}}'>
-      ${slider}
-      </template>
-      <template is='dom-if' if='{{!hideControl}}'>
-      <ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle>
-      </template>
-      </hui-generic-entity-row>
-      <template is='dom-if' if='{{showBottom}}'>
-      <div class="second-line">
-      ${slider}
+    <hui-generic-entity-row
+      config="[[_config]]"
+      hass="[[_hass]]"
+      >
+      <div class="flex">
+        <template is='dom-if' if='{{showTop}}'>
+          ${slider}
+        </template>
+        <template is='dom-if' if='{{!hideControl}}'>
+          <ha-entity-toggle
+            state-obj="[[stateObj]]"
+            hass="[[_hass]]"
+          ></ha-entity-toggle>
+        </template>
       </div>
-      </template>
+    </hui-generic-entity-row>
+    <template is='dom-if' if='{{showBottom}}'>
+      <div class="second-line">
+        ${slider}
+      </div>
+    </template>
     `
   }
 
@@ -41,7 +59,8 @@ class SliderEntityRow extends Polymer.Element {
       isOn: { type: Boolean },
       stateObj: { type: Object, value: null },
       min: { type: Number, value: 0 },
-      max: { type: Number, value: 255 },
+      max: { type: Number, value: 100 },
+      step: { type: Number, value: 5 },
       attribute: { type: String, value: 'brightness' },
       value: Number,
     };
@@ -81,7 +100,7 @@ class SliderEntityRow extends Polymer.Element {
     this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
     if(this.stateObj) {
       if(this.stateObj.state === 'on') {
-        this.value = this.stateObj.attributes[this.attribute];
+        this.value = this.stateObj.attributes[this.attribute]/2.55;
         this.isOn = true;
       } else {
         this.value = this.min;
@@ -92,7 +111,7 @@ class SliderEntityRow extends Polymer.Element {
   }
 
   selectedValue(ev) {
-    const value = parseInt(this.value, 10);
+    const value = Math.ceil(parseInt(this.value, 10)*2.55);
     const param = {entity_id: this.stateObj.entity_id };
     if(Number.isNaN(value)) return;
     if(value === 0) {