Stop paper-slider to change value on touchdown on the sliderbar (#1006)

* Stop paper-slider to change value on touchdown on the sliderbar.
This prevents interfering with intended scroll. Touch-tap on the
sliderbar still works. Mouse-behavior doesn't change eiter.

* change property syntax

src/components/ha-labeled-slider.html

@@ -33,7 +33,7 @@
     <div class='title'>[[caption]]</div>
     <iron-icon icon='[[icon]]'></iron-icon>
     <div class='slider-container'>
-      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}'>
+      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' ignore-bar-touch='[[ignoreBarTouch]]'>
       </paper-slider>
     </div>
   </template>
@@ -45,21 +45,11 @@ class HaLabeledSlider extends Polymer.Element {
 
   static get properties() {
     return {
-      caption: {
-        type: String,
-      },
-
-      icon: {
-        type: String,
-      },
-
-      min: {
-        type: Number,
-      },
-
-      max: {
-        type: Number,
-      },
+      caption: String,
+      icon: String,
+      min: Number,
+      max: Number,
+      ignoreBarTouch: Boolean,
 
       value: {
         type: Number,

src/dialogs/more-info/controls/more-info-climate.html

@@ -171,7 +171,8 @@
                 secondary-progress='[[stateObj.attributes.max_humidity]]'
                 step='1' pin
                 value='[[stateObj.attributes.humidity]]'
-                on-change='targetHumiditySliderChanged'>
+                on-change='targetHumiditySliderChanged'
+                ignore-bar-touch>
               </paper-slider>
           </div>
         </div>

src/dialogs/more-info/controls/more-info-cover.html

@@ -34,7 +34,8 @@
           value='{{coverPositionSliderValue}}'
           step='1' pin
           disabled='[[!entityObj.supportsSetPosition]]'
-          on-change='coverPositionSliderChanged'></paper-slider>
+          on-change='coverPositionSliderChanged'
+          ignore-bar-touch></paper-slider>
       </div>
 
       <div class='tilt'>
@@ -48,7 +49,8 @@
           value='{{coverTiltPositionSliderValue}}'
           step='1' pin
           disabled='[[!entityObj.supportsSetTiltPosition]]'
-          on-change='coverTiltPositionSliderChanged'></paper-slider>
+          on-change='coverTiltPositionSliderChanged'
+          ignore-bar-touch></paper-slider>
       </div>
 
     </div>

src/dialogs/more-info/controls/more-info-light.html

@@ -66,7 +66,8 @@
         <ha-labeled-slider
           caption='Brightness' icon='mdi:brightness-5' max='255'
           value='{{brightnessSliderValue}}'
-          on-change='brightnessSliderChanged'></ha-labeled-slider>
+          on-change='brightnessSliderChanged'
+          ignore-bar-touch></ha-labeled-slider>
       </div>
 
       <div class='color_temp'>
@@ -74,14 +75,16 @@
           caption='Color Temperature' icon='mdi:thermometer'
           min='[[stateObj.attributes.min_mireds]]' max='[[stateObj.attributes.max_mireds]]'
           value='{{ctSliderValue}}'
-          on-change='ctSliderChanged'></ha-labeled-slider>
+          on-change='ctSliderChanged'
+          ignore-bar-touch></ha-labeled-slider>
       </div>
 
       <div class='white_value'>
         <ha-labeled-slider
           caption='White Value' icon='mdi:file-word-box' max='255'
           value='{{wvSliderValue}}'
-          on-change='wvSliderChanged'></ha-labeled-slider>
+          on-change='wvSliderChanged'
+          ignore-bar-touch></ha-labeled-slider>
       </div>
 
       <ha-color-picker
@@ -103,7 +106,7 @@
           </paper-listbox>
         </paper-dropdown-menu>
       </div>
-      
+
       <ha-attributes state-obj="[[stateObj]]" extra-filters="brightness,color_temp,white_value,effect_list,effect,rgb_color,xy_color,min_mireds,max_mireds"></ha-attributes>
     </div>
   </template>

src/dialogs/more-info/controls/more-info-media_player.html

@@ -91,7 +91,8 @@
           icon="[[computeMuteVolumeIcon(isMuted)]]"></paper-icon-button>
         <paper-slider disabled$='[[isMuted]]'
           min='0' max='100' value='[[volumeSliderValue]]'
-          on-change='volumeSliderChanged' class='flex'>
+          on-change='volumeSliderChanged' class='flex'
+          ignore-bar-touch>
         </paper-slider>
       </div>
       <!-- SOURCE PICKER -->

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

@@ -41,7 +41,7 @@
     <div class='horizontal justified layout' id='input_number_card'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
         <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' hidden='[[hiddenslider]]' pin
-          on-change='selectedValueChanged' on-click='stopPropagation' id='slider'>
+          on-change='selectedValueChanged' on-click='stopPropagation' id='slider' ignore-bar-touch>
         </paper-slider>
       <paper-input
         no-label-float