Climate range slider (#111)

* Update paper-range-slider in Bower.json

* Revert "Update paper-range-slider in Bower.json"

This reverts commit 0c305bd2fec2c8d99b3aeb1ee3f2461df80dc87c.

* update paper-range-slider in bower.json

* Update styling for temp-slider and temp-range-slider

* Fix slider colors for production

* Moved class to parent container

bower.json

@@ -18,6 +18,6 @@
     "paper-scroll-header-panel": "~1.0.16",
     "app-layout": "~0.10.2",
     "fecha": "~2.2.0",
-    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.1"
+    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.2"
   }
 }

src/more-infos/more-info-climate.html

@@ -50,11 +50,20 @@
         width: 100%;
       }
 
-      paper-range-slider {
-        width: 198px;
-        height: 2px;
-        margin-bottom: 16px;
-        --paper-range-slider-active-color: var(--primary-color);
+      .heat {
+        --paper-slider-active-color: var(--paper-orange-400);
+        --paper-slider-secondary-color: var(--paper-green-400);
+      }
+
+      .cool {
+        --paper-slider-active-color: var(--paper-green-400);
+        --paper-slider-secondary-color: var(--paper-blue-400);
+      }
+
+      #temp-range-slider {
+        --paper-range-slider-lower-color: var(--paper-orange-400);
+        --paper-range-slider-active-color: var(--paper-green-400);
+        --paper-range-slider-higher-color: var(--paper-blue-400);
         --paper-range-slider-knob-color: var(--primary-color);
         --paper-range-slider-pin-color: var(--primary-color);
       }
@@ -70,12 +79,13 @@
 
     <div class$='[[computeClassNames(stateObj)]]'>
       <div class='container-temperature'>
-        <div class='single-row'>
+        <div class$='single-row, [[stateObj.attributes.operation_mode]]'>
           <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div>
           <paper-slider
-            id="temp-slider"
+            id='temp-slider'
             min='[[stateObj.attributes.min_temp]]'
             max='[[stateObj.attributes.max_temp]]'
+            secondary-progress='[[stateObj.attributes.max_temp]]'
             pin
             step='0.5'
             value='[[stateObj.attributes.temperature]]'
@@ -83,7 +93,7 @@
             on-change='targetTemperatureSliderChanged'>
           </paper-slider>
           <paper-range-slider
-            id="temp-range-slider"
+            id='temp-range-slider'
             min='[[stateObj.attributes.min_temp]]'
             max='[[stateObj.attributes.max_temp]]'
             pin

src/resources/ha-style.html

@@ -39,6 +39,8 @@
 
     /* for paper-slider */
     --paper-green-400: #66bb6a;
+    --paper-blue-400: #42a5f5;
+    --paper-orange-400: #ffa726;
 
     /* opacity for dark text on a light background */
     --dark-divider-opacity: 0.12;