From b107e0e15ca4e024545ca851781cf9fc04fd237e Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@oosterwijkbrandpreventie.nl>
Date: Mon, 19 Mar 2018 22:42:52 +0100
Subject: [PATCH] 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         | 22 +++++--------------
 .../more-info/controls/more-info-climate.html |  3 ++-
 .../more-info/controls/more-info-cover.html   |  6 +++--
 .../more-info/controls/more-info-light.html   | 11 ++++++----
 .../controls/more-info-media_player.html      |  3 ++-
 .../state-card-input_number.html              |  2 +-
 6 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/ha-labeled-slider.html b/src/components/ha-labeled-slider.html
index d7cdd8ef1b..170b474407 100644
--- a/src/components/ha-labeled-slider.html
+++ b/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,
diff --git a/src/dialogs/more-info/controls/more-info-climate.html b/src/dialogs/more-info/controls/more-info-climate.html
index 3f483416ec..e1394b5d4f 100644
--- a/src/dialogs/more-info/controls/more-info-climate.html
+++ b/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>
diff --git a/src/dialogs/more-info/controls/more-info-cover.html b/src/dialogs/more-info/controls/more-info-cover.html
index 2c3cb2a11a..232bab67c6 100644
--- a/src/dialogs/more-info/controls/more-info-cover.html
+++ b/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>
diff --git a/src/dialogs/more-info/controls/more-info-light.html b/src/dialogs/more-info/controls/more-info-light.html
index 25e4f5a935..043142562d 100644
--- a/src/dialogs/more-info/controls/more-info-light.html
+++ b/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>
diff --git a/src/dialogs/more-info/controls/more-info-media_player.html b/src/dialogs/more-info/controls/more-info-media_player.html
index 8d903578ed..0e028e2551 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.html
+++ b/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 -->
diff --git a/src/state-summary/state-card-input_number.html b/src/state-summary/state-card-input_number.html
index 1468433d0b..6918e46f30 100644
--- a/src/state-summary/state-card-input_number.html
+++ b/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