diff --git a/bower.json b/bower.json
index 9221636f5d..fd49e29545 100644
--- a/bower.json
+++ b/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"
   }
 }
diff --git a/src/more-infos/more-info-climate.html b/src/more-infos/more-info-climate.html
index b3a079a3d6..2f1f48c575 100644
--- a/src/more-infos/more-info-climate.html
+++ b/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
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index ee8df5058f..b16465838f 100644
--- a/src/resources/ha-style.html
+++ b/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;