From be8812e0aff5c516d505b6e4efd676cdaf0dc220 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 3 Sep 2020 23:23:10 +0200
Subject: [PATCH] Add input field to ha form integer when it has a min and max
 (#6781)

---
 src/components/ha-form/ha-form-integer.ts | 7 ++++++-
 src/components/ha-paper-slider.js         | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index e00aa40a0e..27ef43a53e 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -54,7 +54,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                   `
                 : ""}
               <ha-paper-slider
-                pin=""
+                pin
+                editable
                 .value=${this._value}
                 .min=${this.schema.valueMin}
                 .max=${this.schema.valueMax}
@@ -111,6 +112,10 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       .flex {
         display: flex;
       }
+      ha-paper-slider {
+        width: 100%;
+        margin-right: 16px;
+      }
     `;
   }
 }
diff --git a/src/components/ha-paper-slider.js b/src/components/ha-paper-slider.js
index 9070dbe2eb..068a6d14c9 100644
--- a/src/components/ha-paper-slider.js
+++ b/src/components/ha-paper-slider.js
@@ -68,6 +68,10 @@ class HaPaperSlider extends PaperSliderClass {
         -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
         transform: scale(1) translate(0, -17px) scaleX(-1) !important;
         }
+
+        .slider-input {
+          width: 54px;
+        }
     `;
     tpl.content.appendChild(styleEl);
     return tpl;