From 69ff8dd0c40bb5216a1923e708e52f535143fe38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 28 Jan 2022 17:17:29 +0100
Subject: [PATCH] Use ha-slider in ha-form-integer (#11471)

---
 src/components/ha-form/ha-form-integer.ts | 11 ++++++-----
 src/components/ha-form/ha-form.ts         |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 5ed8abcdaf..e8ec34f13f 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-textfield";
 import type { TextField } from "@material/mwc-textfield";
-import "@material/mwc-slider";
 import type { Slider } from "@material/mwc-slider";
 import {
   css,
@@ -14,6 +13,7 @@ import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
 import { HaFormElement, HaFormIntegerData, HaFormIntegerSchema } from "./types";
+import "../ha-slider";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
@@ -54,15 +54,16 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                   ></ha-checkbox>
                 `
               : ""}
-            <mwc-slider
-              discrete
+            <ha-slider
+              pin
+              ignore-bar-touch
               .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               .disabled=${this.disabled ||
               (this.data === undefined && this.schema.optional)}
               @change=${this._valueChanged}
-            ></mwc-slider>
+            ></ha-slider>
           </div>
         </div>
       `;
@@ -168,7 +169,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       .flex {
         display: flex;
       }
-      mwc-slider {
+      ha-slider {
         flex: 1;
       }
       mwc-textfield {
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index 6a5da55448..e96f5243e5 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -104,7 +104,7 @@ export class HaForm extends LitElement implements HaFormElement {
     return css`
       .root {
         margin-bottom: -24px;
-        overflow: auto;
+        overflow: clip visible;
       }
       .root > * {
         display: block;