Fix paper-slider pin style

panels/config/config-entries/ha-form.html

@@ -1,13 +1,14 @@
 <link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
 
 <link rel="import" href='../../../bower_components/paper-input/paper-input.html'>
-<link rel="import" href='../../../bower_components/paper-slider/paper-slider.html'>
 <link rel="import" href='../../../bower_components/paper-checkbox/paper-checkbox.html'>
 <link rel='import' href='../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
 
 <link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel="import" href='../../../src/components/ha-paper-slider.html'>
+
 
 <dom-module id="ha-form">
   <template>
@@ -44,12 +45,12 @@
         <template is='dom-if' if='[[_isRange(schema)]]' restamp>
           <div>
             [[computeLabel(schema)]]
-            <paper-slider
+            <ha-paper-slider
               pin
               value='{{data}}'
               min='[[schema.valueMin]]'
               max='[[schema.valueMax]]'
-            ></paper-slider>
+            ></ha-paper-slider>
           </div>
         </template>
         <template is='dom-if' if='[[!_isRange(schema)]]' restamp>

src/components/ha-cover-tilt-controls.html

@@ -2,7 +2,6 @@
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
 
 <link rel='import' href='../util/cover-model.html'>
 

src/components/ha-labeled-slider.html

@@ -1,6 +1,6 @@
 <link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
-<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
+<link rel="import" href='./ha-paper-slider.html'>
 
 <dom-module id='ha-labeled-slider'>
   <template>
@@ -25,16 +25,16 @@
         margin-left: 24px;
       }
 
-      paper-slider {
+      ha-paper-slider {
         background-image: var(--ha-slider-background);
       }
     </style>
 
     <div class='title'>[[caption]]</div>
     <iron-icon icon='[[icon]]'></iron-icon>
     <div class='slider-container'>
-      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' ignore-bar-touch='[[ignoreBarTouch]]'>
-      </paper-slider>
+      <ha-paper-slider min='[[min]]' max='[[max]]' value='{{value}}' ignore-bar-touch='[[ignoreBarTouch]]'>
+      </ha-paper-slider>
     </div>
   </template>
 </dom-module>

src/components/ha-paper-slider.html

@@ -0,0 +1,88 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
+
+
+<dom-module id="ha-paper-slider">
+  <template strip-whitespace>
+    <style include="paper-slider">
+      .pin > .slider-knob > .slider-knob-inner {
+        font-size:  var(--ha-paper-slider-pin-font-size, 10px);
+        line-height: normal;
+      }
+
+      .pin > .slider-knob > .slider-knob-inner::before {
+        top: unset;
+        margin-left: unset;
+
+        bottom: calc(15px + var(--calculated-paper-slider-height)/2);
+        left: 50%;
+        width: 2.6em;
+        height: 2.6em;
+
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate(-45deg) scale(0) translate(0);
+        transform: rotate(-45deg) scale(0) translate(0);
+      }
+
+      .pin.expand > .slider-knob > .slider-knob-inner::before {
+        -webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);
+        transform: rotate(-45deg) scale(1) translate(7px, -7px);
+      }
+
+      .pin > .slider-knob > .slider-knob-inner::after {
+        top: unset;
+        font-size: unset;
+
+        bottom: calc(15px + var(--calculated-paper-slider-height)/2);
+        left: 50%;
+        margin-left: -1.3em;
+        width: 2.6em;
+        height: 2.4em;
+
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+        -webkit-transform: scale(0) translate(0);
+        transform: scale(0) translate(0);
+      }
+
+      .pin.expand > .slider-knob > .slider-knob-inner::after {
+        -webkit-transform: scale(1) translate(0, -10px);
+        transform: scale(1) translate(0, -10px);
+      }
+    </style>
+  </template>
+
+  <script>
+    'use strict';
+
+    {
+      /**
+      * @polymer
+      * @customElement
+      * @appliesMixin paper-slider
+      */
+      const PaperSliderClass = customElements.get('paper-slider');
+      let myTemplate;
+
+      class HaPaperSlider extends PaperSliderClass {
+        static get is() { return 'ha-paper-slider'; }
+
+        static get template() {
+          if (!myTemplate) {
+            // Retrieve this element's dom-module template
+            myTemplate = Polymer.DomModule.import(HaPaperSlider.is, 'template');
+            // Clone the contents of the superclass template
+            const superTemplateContents = document.importNode(PaperSliderClass.template.content, true);
+            // Remove the style from superclass contents, we already included them in our own <style>
+            superTemplateContents.querySelector('style').remove();
+            // Insert the superclass contents
+            myTemplate.content.append(superTemplateContents);
+          }
+          return myTemplate;
+        }
+      }
+      customElements.define(HaPaperSlider.is, HaPaperSlider);
+    }
+  </script>
+</dom-module>

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

@@ -3,7 +3,6 @@
 
 <link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
 <link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
@@ -12,6 +11,7 @@
 <link rel='import' href='../../../../src/util/hass-mixins.html'>
 
 <link rel="import" href='../../../components/ha-climate-control.html'>
+<link rel="import" href='../../../components/ha-paper-slider.html'>
 
 <dom-module id='more-info-climate'>
   <template>
@@ -64,7 +64,7 @@
         cursor: pointer;
       }
 
-      paper-slider {
+      ha-paper-slider {
         width: 100%;
       }
 
@@ -164,7 +164,7 @@
           <div>Target Humidity</div>
             <div class="single-row">
               <div class="target-humidity">[[stateObj.attributes.humidity]] %</div>
-              <paper-slider
+              <ha-paper-slider
                 class='humidity'
                 min='[[stateObj.attributes.min_humidity]]'
                 max='[[stateObj.attributes.max_humidity]]'
@@ -173,7 +173,7 @@
                 value='[[stateObj.attributes.humidity]]'
                 on-change='targetHumiditySliderChanged'
                 ignore-bar-touch>
-              </paper-slider>
+              </ha-paper-slider>
           </div>
         </div>
       </template>

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

@@ -2,8 +2,8 @@
 
 <link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
 
+<link rel="import" href='../../../components/ha-paper-slider.html'>
 <link rel='import' href='../../../util/cover-model.html'>
 <link rel='import' href='../../../components/ha-cover-tilt-controls.html'>
 
@@ -30,13 +30,13 @@
 
       <div class='current_position'>
         <div>Position</div>
-        <paper-slider
+        <ha-paper-slider
           min='0' max='100'
           value='{{coverPositionSliderValue}}'
           step='1' pin
           disabled='[[!entityObj.supportsSetPosition]]'
           on-change='coverPositionSliderChanged'
-          ignore-bar-touch></paper-slider>
+          ignore-bar-touch></ha-paper-slider>
       </div>
 
       <div class='tilt'>
@@ -45,13 +45,13 @@
           <ha-cover-tilt-controls hidden$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]">
           </ha-cover-tilt-controls>
         </div>
-        <paper-slider
+        <ha-paper-slider
           min='0' max='100'
           value='{{coverTiltPositionSliderValue}}'
           step='1' pin
           disabled='[[!entityObj.supportsSetTiltPosition]]'
           on-change='coverTiltPositionSliderChanged'
-          ignore-bar-touch></paper-slider>
+          ignore-bar-touch></ha-paper-slider>
       </div>
 
     </div>

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

@@ -5,11 +5,11 @@
 <link rel='import' href='../../../../bower_components/iron-icon/iron-icon.html'>
 
 <link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
-<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
 <link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
 
+<link rel="import" href='../../../../src/components/ha-paper-slider.html'>
 <link rel='import' href='../../../../src/util/hass-mixins.html'>
 <link rel='import' href='../../../../src/util/hass-media-player-model.html'>
 
@@ -91,11 +91,11 @@
         <paper-icon-button on-click="handleVolumeTap"
           hidden$="[[playerObj.supportsVolumeButtons]]"
           icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
-        <paper-slider disabled$='[[playerObj.isMuted]]'
+        <ha-paper-slider disabled$='[[playerObj.isMuted]]'
           min='0' max='100' value='[[playerObj.volumeSliderValue]]'
           on-change='volumeSliderChanged' class='flex'
           ignore-bar-touch>
-        </paper-slider>
+        </ha-paper-slider>
       </div>
       <!-- SOURCE PICKER -->
       <div class='controls layout horizontal justified'

src/resources/ha-style.html

@@ -115,6 +115,7 @@
       --paper-slider-active-color: var(--slider-color);
       --paper-slider-secondary-color: var(--slider-secondary-color);
       --paper-slider-container-color: var(--slider-bar-color);
+      --ha-paper-slider-pin-font-size: 15px;
     }
   </style>