Merge pull request #40 from persandstrom/input_slider

add input slider

src/state-summary/state-card-content.html

@@ -3,6 +3,7 @@
 <link rel="import" href="state-card-configurator.html">
 <link rel="import" href="state-card-display.html">
 <link rel="import" href="state-card-input_select.html">
+<link rel="import" href="state-card-input_slider.html">
 <link rel="import" href="state-card-media_player.html">
 <link rel="import" href="state-card-rollershutter.html">
 <link rel="import" href="state-card-scene.html">

src/state-summary/state-card-content.js

@@ -6,6 +6,7 @@ import dynamicContentUpdater from '../util/dynamic-content-updater';
 require('./state-card-configurator');
 require('./state-card-display');
 require('./state-card-input_select');
+require('./state-card-input_slider');
 require('./state-card-media_player');
 require('./state-card-scene');
 require('./state-card-script');

src/state-summary/state-card-input_slider.html

@@ -0,0 +1,20 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-input_slider">
+  <style>
+  paper-slider {
+    margin-left: 16px;
+  }
+  </style>
+
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' on-change='selectedValueChanged'>
+      </paper-slider>
+    </div>
+  </template>
+</dom-module>

src/state-summary/state-card-input_slider.js

@@ -0,0 +1,44 @@
+import hass from '../util/home-assistant-js-instance';
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+const { serviceActions } = hass;
+
+export default new Polymer({
+  is: 'state-card-input_slider',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'stateObjectChanged',
+    },
+    min: {
+      type: Number,
+    },
+    max: {
+      type: Number,
+    },
+    step: {
+      type: Number,
+    },
+    value: {
+      type: Number,
+    },
+  },
+  stateObjectChanged(newVal) {
+    this.value = Number(newVal.state);
+    this.min = Number(newVal.attributes.min);
+    this.max = Number(newVal.attributes.max);
+    this.step = Number(newVal.attributes.step);
+  },
+  selectedValueChanged() {
+    if (this.value === Number(this.stateObj.state)) {
+      return;
+    }
+    serviceActions.callService('input_slider', 'select_value', {
+      value: this.value,
+      entity_id: this.stateObj.entityId,
+    });
+  },
+});

src/util/domain-icon.js

@@ -38,6 +38,9 @@ export default function domainIcon(domain, state) {
     case 'input_select':
       return 'mdi:format-list-bulleted';
 
+    case 'input_slider':
+      return 'mdi:ray-vertex';
+
     case 'light':
       return 'mdi:lightbulb';
 

src/util/state-card-type.js

@@ -3,6 +3,7 @@ import canToggle from './can-toggle';
 const DOMAINS_WITH_CARD = [
   'configurator',
   'input_select',
+  'input_slider',
   'media_player',
   'rollershutter',
   'scene',