Add input field to ha form integer when it has a min and max (#6781)

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;
+      }
     `;
   }
 }

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;