Add color temp slider if ct_color is supported

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

@@ -40,9 +40,19 @@
           on-change='brightnessSliderChanged' class='flex'>
         </paper-slider>
       </div>
+      <template is="dom-if" if="{{ctSliderValue}}">
+        <div class='brightness center horizontal layout'>
+          <div>Color temperature</div>
+          <paper-slider min="154" max="500"
+            id='ct' value='{{ctSliderValue}}'
+            on-change='ctSliderChanged' class='flex'>
+          </paper-slider>
+        </div>
+      </template>
 
       <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
-      </color-picker>
+      </ha-color-picker>
+
     </div>
   </template>
 </dom-module>

src/more-infos/more-info-light.js

@@ -5,7 +5,7 @@ import attributeClassNames from '../util/attribute-class-names';
 
 require('../components/ha-color-picker');
 
-const ATTRIBUTE_CLASSES = ['brightness', 'xy_color'];
+const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'ct_color'];
 
 export default new Polymer({
   is: 'more-info-light',
@@ -20,11 +20,17 @@ export default new Polymer({
       type: Number,
       value: 0,
     },
+
+    ctSliderValue: {
+      type: Number,
+      value: 0,
+    },
   },
 
   stateObjChanged(newVal) {
     if (newVal && newVal.state === 'on') {
       this.brightnessSliderValue = newVal.attributes.brightness;
+      this.ctSliderValue = newVal.attributes.ct_color;
     }
 
     this.async(() => this.fire('iron-resize'), 500);
@@ -49,6 +55,17 @@ export default new Polymer({
     }
   },
 
+  ctSliderChanged(ev) {
+    const ct = parseInt(ev.target.value, 10);
+
+    if (isNaN(ct)) return;
+
+    serviceActions.callService('light', 'turn_on', {
+      entity_id: this.stateObj.entityId,
+      ct_color: ct,
+    });
+  },
+
   colorPicked(ev) {
     const color = ev.detail.rgb;