Rename indicator property and add show-handle property for ha bar slider (#14466)

gallery/src/pages/components/ha-bar-slider.ts

@@ -8,7 +8,7 @@ import "../../../../src/components/ha-card";
 const sliders: {
   id: string;
   label: string;
-  mode?: "start" | "end" | "indicator";
+  mode?: "start" | "end" | "cursor";
   class?: string;
 }[] = [
   {
@@ -22,9 +22,9 @@ const sliders: {
     mode: "end",
   },
   {
-    id: "slider-indicator",
+    id: "slider-cursor",
-    label: "Slider (indicator mode)",
+    label: "Slider (cursor mode)",
-    mode: "indicator",
+    mode: "cursor",
   },
   {
     id: "slider-start-custom",
@@ -39,9 +39,9 @@ const sliders: {
     class: "custom",
   },
   {
-    id: "slider-indicator-custom",
+    id: "slider-cursor-custom",
-    label: "Slider (indicator mode) and custom style",
+    label: "Slider (cursor mode) and custom style",
-    mode: "indicator",
+    mode: "cursor",
     class: "custom",
   },
 ];

src/components/ha-bar-slider.ts

@@ -48,11 +48,14 @@ export class HaBarSlider extends LitElement {
   public disabled = false;
 
   @property()
-  public mode?: "start" | "end" | "indicator" = "start";
+  public mode?: "start" | "end" | "cursor" = "start";
 
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   public vertical = false;
 
+  @property({ type: Boolean, attribute: "show-handle" })
+  public showHandle = false;
+
   @property({ type: Number })
   public value?: number;
 
@@ -71,7 +74,7 @@ export class HaBarSlider extends LitElement {
   public pressed = false;
 
   valueToPercentage(value: number) {
-    return (value - this.min) / (this.max - this.min);
+    return (this.boundedValue(value) - this.min) / (this.max - this.min);
   }
 
   percentageToValue(value: number) {
@@ -241,11 +244,11 @@ export class HaBarSlider extends LitElement {
         })}
       >
         <div class="slider-track-background"></div>
-        ${this.mode === "indicator"
+        ${this.mode === "cursor"
           ? html`
               <div
                 class=${classMap({
-                  "slider-track-indicator": true,
+                  "slider-track-cursor": true,
                   vertical: this.vertical,
                 })}
               ></div>
@@ -256,6 +259,7 @@ export class HaBarSlider extends LitElement {
                   "slider-track-bar": true,
                   vertical: this.vertical,
                   [this.mode ?? "start"]: true,
+                  "show-handle": this.showHandle,
                 })}
               ></div>
             `}
@@ -302,12 +306,18 @@ export class HaBarSlider extends LitElement {
         --border-radius: var(--slider-bar-border-radius);
         --handle-size: 4px;
         --handle-margin: calc(var(--slider-bar-thickness) / 8);
+        --slider-size: 100%;
         position: absolute;
         height: 100%;
         width: 100%;
         background-color: var(--slider-bar-color);
         transition: transform 180ms ease-in-out;
       }
+      .slider .slider-track-bar.show-handle {
+        --slider-size: calc(
+          100% - 2 * var(--handle-margin) - var(--handle-size)
+        );
+      }
       .slider .slider-track-bar::after {
         display: block;
         content: "";
@@ -319,7 +329,11 @@ export class HaBarSlider extends LitElement {
       .slider .slider-track-bar {
         top: 0;
         left: 0;
-        transform: translate3d(calc((var(--value, 0) - 1) * 100%), 0, 0);
+        transform: translate3d(
+          calc((var(--value, 0) - 1) * var(--slider-size)),
+          0,
+          0
+        );
         border-radius: 0 var(--border-radius) var(--border-radius) 0;
       }
       .slider .slider-track-bar:after {
@@ -332,7 +346,11 @@ export class HaBarSlider extends LitElement {
       .slider .slider-track-bar.end {
         right: 0;
         left: initial;
-        transform: translate3d(calc(var(--value, 0) * 100%), 0, 0);
+        transform: translate3d(
+          calc(var(--value, 0) * var(--slider-size)),
+          0,
+          0
+        );
         border-radius: var(--border-radius) 0 0 var(--border-radius);
       }
       .slider .slider-track-bar.end::after {
@@ -343,7 +361,11 @@ export class HaBarSlider extends LitElement {
       .slider .slider-track-bar.vertical {
         bottom: 0;
         left: 0;
-        transform: translate3d(0, calc((1 - var(--value, 0)) * 100%), 0);
+        transform: translate3d(
+          0,
+          calc((1 - var(--value, 0)) * var(--slider-size)),
+          0
+        );
         border-radius: var(--border-radius) var(--border-radius) 0 0;
       }
       .slider .slider-track-bar.vertical:after {
@@ -357,7 +379,11 @@ export class HaBarSlider extends LitElement {
       .slider .slider-track-bar.vertical.end {
         top: 0;
         bottom: initial;
-        transform: translate3d(0, calc((0 - var(--value, 0)) * 100%), 0);
+        transform: translate3d(
+          0,
+          calc((0 - var(--value, 0)) * var(--slider-size)),
+          0
+        );
         border-radius: 0 0 var(--border-radius) var(--border-radius);
       }
       .slider .slider-track-bar.vertical.end::after {
@@ -365,7 +391,7 @@ export class HaBarSlider extends LitElement {
         bottom: var(--handle-margin);
       }
 
-      .slider .slider-track-indicator:after {
+      .slider .slider-track-cursor:after {
         display: block;
         content: "";
         background-color: rgb(var(--rgb-secondary-text-color));
@@ -378,8 +404,8 @@ export class HaBarSlider extends LitElement {
         border-radius: var(--handle-size);
       }
 
-      .slider .slider-track-indicator {
+      .slider .slider-track-cursor {
-        --indicator-size: calc(var(--slider-bar-thickness) / 4);
+        --cursor-size: calc(var(--slider-bar-thickness) / 4);
         --handle-size: 4px;
         position: absolute;
         background-color: white;
@@ -387,29 +413,29 @@ export class HaBarSlider extends LitElement {
         transition: left 180ms ease-in-out, bottom 180ms ease-in-out;
         top: 0;
         bottom: 0;
-        left: calc(var(--value, 0) * (100% - var(--indicator-size)));
+        left: calc(var(--value, 0) * (100% - var(--cursor-size)));
-        width: var(--indicator-size);
+        width: var(--cursor-size);
       }
-      .slider .slider-track-indicator:after {
+      .slider .slider-track-cursor:after {
         height: 50%;
         width: var(--handle-size);
       }
 
-      .slider .slider-track-indicator.vertical {
+      .slider .slider-track-cursor.vertical {
         top: initial;
         right: 0;
         left: 0;
-        bottom: calc(var(--value, 0) * (100% - var(--indicator-size)));
+        bottom: calc(var(--value, 0) * (100% - var(--cursor-size)));
-        height: var(--indicator-size);
+        height: var(--cursor-size);
         width: 100%;
       }
-      .slider .slider-track-indicator.vertical:after {
+      .slider .slider-track-cursor.vertical:after {
         height: var(--handle-size);
         width: 50%;
       }
 
       :host([pressed]) .slider-track-bar,
-      :host([pressed]) .slider-track-indicator {
+      :host([pressed]) .slider-track-cursor {
         transition: none;
       }
     `;

src/components/tile/ha-tile-slider.ts

@@ -9,7 +9,10 @@ export class HaTileSlider extends LitElement {
   public disabled = false;
 
   @property()
-  public mode?: "start" | "end" | "indicator" = "start";
+  public mode?: "start" | "end" | "cursor" = "start";
+
+  @property({ type: Boolean, attribute: "show-handle" })
+  public showHandle = false;
 
   @property({ type: Number })
   public value?: number;
@@ -35,6 +38,7 @@ export class HaTileSlider extends LitElement {
         .min=${this.min}
         .max=${this.max}
         aria-label=${ifDefined(this.label)}
+        .showHandle=${this.showHandle}
       >
       </ha-bar-slider>
     `;

src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts

@@ -1,6 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { stateActive } from "../../../common/entity/state_active";
 import "../../../components/tile/ha-tile-slider";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
@@ -50,6 +51,7 @@ class HuiLightBrightnessTileFeature
           .value=${position}
           min="1"
           max="100"
+          .showHandle=${stateActive(this.stateObj)}
           .disabled=${this.stateObj!.state === UNAVAILABLE}
           @value-changed=${this._valueChanged}
           .label=${this.hass.localize("ui.card.light.brightness")}