diff --git a/src/components/ha-control-circular-slider.ts b/src/components/ha-control-circular-slider.ts
index b8bbffb336..3f6344647d 100644
--- a/src/components/ha-control-circular-slider.ts
+++ b/src/components/ha-control-circular-slider.ts
@@ -59,6 +59,8 @@ const A11Y_KEY_CODES = new Set([
   "End",
 ]);
 
+export type ControlCircularSliderMode = "start" | "end" | "full";
+
 @customElement("ha-control-circular-slider")
 export class HaControlCircularSlider extends LitElement {
   @property({ type: Boolean, reflect: true })
@@ -67,8 +69,11 @@ export class HaControlCircularSlider extends LitElement {
   @property({ type: Boolean })
   public dual?: boolean;
 
-  @property({ type: Boolean, reflect: true })
-  public inverted?: boolean;
+  @property({ type: String })
+  public mode?: ControlCircularSliderMode;
+
+  @property({ type: Boolean })
+  public inactive?: boolean;
 
   @property({ type: String })
   public label?: string;
@@ -407,12 +412,10 @@ export class HaControlCircularSlider extends LitElement {
   protected renderArc(
     id: string,
     value: number | undefined,
-    inverted: boolean | undefined
+    mode: ControlCircularSliderMode
   ) {
     if (this.disabled) return nothing;
 
-    const limit = inverted ? this.max : this.min;
-
     const path = svgArc({
       x: 0,
       y: 0,
@@ -421,82 +424,100 @@ export class HaControlCircularSlider extends LitElement {
       r: RADIUS,
     });
 
+    const limit = mode === "end" ? this.max : this.min;
+
     const current = this.current ?? limit;
     const target = value ?? limit;
 
-    const showActive = inverted ? target <= current : current <= target;
+    const showActive =
+      mode === "end"
+        ? target <= current
+        : mode === "start"
+        ? current <= target
+        : false;
 
-    const activeArcDashArray = showActive
-      ? inverted
+    const activeArc = showActive
+      ? mode === "end"
         ? this._strokeDashArc(target, current)
         : this._strokeDashArc(current, target)
       : this._strokeCircleDashArc(target);
 
-    const arcDashArray = inverted
-      ? this._strokeDashArc(target, limit)
-      : this._strokeDashArc(limit, target);
+    const coloredArc =
+      mode === "full"
+        ? this._strokeDashArc(this.min, this.max)
+        : mode === "end"
+        ? this._strokeDashArc(target, limit)
+        : this._strokeDashArc(limit, target);
 
-    const targetCircleDashArray = this._strokeCircleDashArc(target);
+    const targetCircle = this._strokeCircleDashArc(target);
 
-    const currentCircleDashArray =
+    const currentCircle =
       this.current != null &&
-      showActive &&
-      current <= this.max &&
-      current >= this.min
+      this.current <= this.max &&
+      this.current >= this.min &&
+      (showActive || this.mode === "full")
         ? this._strokeCircleDashArc(this.current)
         : undefined;
 
     return svg`
-       <path
-        class="arc arc-clear"
-        d=${path}
-        stroke-dasharray=${arcDashArray[0]}
-        stroke-dashoffset=${arcDashArray[1]}
-      />
-      <path
-        class="arc arc-background ${classMap({ [id]: true })}"
-        d=${path}
-        stroke-dasharray=${arcDashArray[0]}
-        stroke-dashoffset=${arcDashArray[1]}
-      />
-      <path
-        .id=${id}
-        d=${path}
-        class="arc arc-active ${classMap({ [id]: true })}"
-        stroke-dasharray=${activeArcDashArray[0]}
-        stroke-dashoffset=${activeArcDashArray[1]}
-        role="slider"
-        tabindex="0"
-        aria-valuemin=${this.min}
-        aria-valuemax=${this.max}
-        aria-valuenow=${
-          this._localValue != null
-            ? this._steppedValue(this._localValue)
-            : undefined
+      <g class=${classMap({ inactive: Boolean(this.inactive) })}>
+        <path
+          class="arc arc-clear"
+          d=${path}
+          stroke-dasharray=${coloredArc[0]}
+          stroke-dashoffset=${coloredArc[1]}
+        />
+        <path
+          class="arc arc-colored ${classMap({ [id]: true })}"
+          d=${path}
+          stroke-dasharray=${coloredArc[0]}
+          stroke-dashoffset=${coloredArc[1]}
+        />
+        <path
+          .id=${id}
+          d=${path}
+          class="arc arc-active ${classMap({ [id]: true })}"
+          stroke-dasharray=${activeArc[0]}
+          stroke-dashoffset=${activeArc[1]}
+          role="slider"
+          tabindex="0"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${
+            this._localValue != null
+              ? this._steppedValue(this._localValue)
+              : undefined
+          }
+          aria-disabled=${this.disabled}
+          aria-label=${ifDefined(this.lowLabel ?? this.label)}
+          @keydown=${this._handleKeyDown}
+          @keyup=${this._handleKeyUp}
+        />
+        ${
+          currentCircle
+            ? svg`
+              <path
+                class="current arc-current"
+                d=${path}
+                stroke-dasharray=${currentCircle[0]}
+                stroke-dashoffset=${currentCircle[1]}
+              />
+          `
+            : nothing
         }
-        aria-disabled=${this.disabled}
-        aria-label=${ifDefined(this.lowLabel ?? this.label)}
-        @keydown=${this._handleKeyDown}
-        @keyup=${this._handleKeyUp}
-      />
-      ${
-        currentCircleDashArray
-          ? svg`
-            <path
-              class="current arc-current"
-              d=${path}
-              stroke-dasharray=${currentCircleDashArray[0]}
-              stroke-dashoffset=${currentCircleDashArray[1]}
-            />
-        `
-          : nothing
-      }
-      <path
-        class="target"
-        d=${path}
-        stroke-dasharray=${targetCircleDashArray[0]}
-        stroke-dashoffset=${targetCircleDashArray[1]}
-      />
+        <path
+          class="target-border ${classMap({ [id]: true })}"
+          d=${path}
+          stroke-dasharray=${targetCircle[0]}
+          stroke-dashoffset=${targetCircle[1]}
+        />
+        <path
+          class="target"
+          d=${path}
+          stroke-dasharray=${targetCircle[0]}
+          stroke-dashoffset=${targetCircle[1]}
+        />
+      </g>
     `;
   }
 
@@ -551,11 +572,11 @@ export class HaControlCircularSlider extends LitElement {
               ? this.renderArc(
                   this.dual ? "low" : "value",
                   lowValue,
-                  this.inverted
+                  (!this.dual && this.mode) || "start"
                 )
               : nothing}
             ${this.dual && highValue != null
-              ? this.renderArc("high", highValue, true)
+              ? this.renderArc("high", highValue, "end")
               : nothing}
           </g>
         </g>
@@ -634,6 +655,19 @@ export class HaControlCircularSlider extends LitElement {
           opacity 180ms ease-in-out;
       }
 
+      .target-border {
+        fill: none;
+        stroke-linecap: round;
+        stroke-width: 24px;
+        stroke: white;
+        transition:
+          stroke-width 300ms ease-in-out,
+          stroke-dasharray 300ms ease-in-out,
+          stroke-dashoffset 300ms ease-in-out,
+          stroke 180ms ease-in-out,
+          opacity 180ms ease-in-out;
+      }
+
       .current {
         fill: none;
         stroke-linecap: round;
@@ -655,7 +689,7 @@ export class HaControlCircularSlider extends LitElement {
       .arc-clear {
         stroke: var(--clear-background-color);
       }
-      .arc-background {
+      .arc-colored {
         opacity: 0.5;
       }
       .arc-active {
@@ -667,6 +701,7 @@ export class HaControlCircularSlider extends LitElement {
 
       .pressed .arc,
       .pressed .target,
+      .pressed .target-border,
       .pressed .current {
         transition:
           stroke-width 300ms ease-in-out,
@@ -674,6 +709,11 @@ export class HaControlCircularSlider extends LitElement {
           opacity 180ms ease-in-out;
       }
 
+      .inactive .arc,
+      .inactive .arc-current {
+        opacity: 0;
+      }
+
       .value {
         stroke: var(--control-circular-slider-color);
       }
diff --git a/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts b/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts
index 5225d51045..57344a4219 100644
--- a/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts
+++ b/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts
@@ -163,6 +163,7 @@ export class HaMoreInfoClimateHumidity extends LitElement {
           })}
         >
           <ha-control-circular-slider
+            .inactive=${!active}
             .value=${this._targetHumidity}
             .min=${this._min}
             .max=${this._max}
diff --git a/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts b/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts
index 1d7306f439..1262bb168d 100644
--- a/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts
+++ b/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts
@@ -18,12 +18,14 @@ import { clamp } from "../../../../common/number/clamp";
 import { formatNumber } from "../../../../common/number/format_number";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-control-circular-slider";
+import type { ControlCircularSliderMode } from "../../../../components/ha-control-circular-slider";
 import "../../../../components/ha-outlined-icon-button";
 import "../../../../components/ha-svg-icon";
 import {
   CLIMATE_HVAC_ACTION_TO_MODE,
   ClimateEntity,
   ClimateEntityFeature,
+  HvacMode,
 } from "../../../../data/climate";
 import { UNAVAILABLE } from "../../../../data/entity";
 import { HomeAssistant } from "../../../../types";
@@ -31,6 +33,16 @@ import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circ
 
 type Target = "value" | "low" | "high";
 
+const SLIDER_MODES: Record<HvacMode, ControlCircularSliderMode> = {
+  auto: "full",
+  cool: "end",
+  dry: "full",
+  fan_only: "full",
+  heat: "start",
+  heat_cool: "full",
+  off: "full",
+};
+
 @customElement("ha-more-info-climate-temperature")
 export class HaMoreInfoClimateTemperature extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -267,17 +279,15 @@ export class HaMoreInfoClimateTemperature extends LitElement {
       );
     }
 
-    const hvacModes = this.stateObj.attributes.hvac_modes;
+    const activeModes = this.stateObj.attributes.hvac_modes.filter(
+      (m) => m !== "off"
+    );
 
     if (
       supportsTargetTemperature &&
       this._targetTemperature.value != null &&
       this.stateObj.state !== UNAVAILABLE
     ) {
-      const hasOnlyCoolMode =
-        hvacModes.length === 2 &&
-        hvacModes.includes("cool") &&
-        hvacModes.includes("off");
       return html`
         <div
           class="container"
@@ -287,7 +297,10 @@ export class HaMoreInfoClimateTemperature extends LitElement {
           })}
         >
           <ha-control-circular-slider
-            .inverted=${mode === "cool" || hasOnlyCoolMode}
+            .inactive=${!active}
+            .mode=${mode === "off" && activeModes.length === 1
+              ? SLIDER_MODES[activeModes[0]]
+              : SLIDER_MODES[mode]}
             .value=${this._targetTemperature.value}
             .min=${this._min}
             .max=${this._max}
@@ -324,6 +337,7 @@ export class HaMoreInfoClimateTemperature extends LitElement {
           })}
         >
           <ha-control-circular-slider
+            .inactive=${!active}
             dual
             .low=${this._targetTemperature.low}
             .high=${this._targetTemperature.high}
diff --git a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
index 53ea757fa5..1a3db1121c 100644
--- a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
+++ b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
@@ -184,7 +184,8 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
           })}
         >
           <ha-control-circular-slider
-            .inverted=${inverted}
+            .inactive=${!active}
+            .mode=${inverted ? "end" : "start"}
             .value=${targetHumidity}
             .min=${this._min}
             .max=${this._max}
diff --git a/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts b/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts
index 3d2319688c..8977e6e000 100644
--- a/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts
+++ b/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts
@@ -9,6 +9,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import { stateActive } from "../../../../common/entity/state_active";
 import { stateColorCss } from "../../../../common/entity/state_color";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import { clamp } from "../../../../common/number/clamp";
@@ -163,6 +164,7 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
     );
 
     const stateColor = stateColorCss(this.stateObj);
+    const active = stateActive(this.stateObj);
 
     if (
       supportsTargetTemperature &&
@@ -177,6 +179,7 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
           })}
         >
           <ha-control-circular-slider
+            .inactive=${!active}
             .value=${this._targetTemperature}
             .min=${this._min}
             .max=${this._max}