diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index 73ba4c9564..3546bac944 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -71,9 +71,7 @@ class MoreInfoClimate extends LitElement {
 
     const temperatureStepSize =
       stateObj.attributes.target_temp_step ||
-      hass.config.unit_system.temperature.indexOf("F") === -1
-        ? 0.5
-        : 1;
+      (hass.config.unit_system.temperature.indexOf("F") === -1 ? 0.5 : 1);
 
     const rtlDirection = computeRTLDirection(hass);
 
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 12b20c2022..8098baa7ab 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -208,6 +208,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       this._jQuery("#thermostat", this.shadowRoot).roundSlider({
         sliderType,
         value: sliderValue,
+        disabled: sliderValue === null,
       });
       this._updateSetTemp(uiValue);
     }
@@ -261,6 +262,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       change: (value) => this._setTemperature(value),
       drag: (value) => this._dragEvent(value),
       value: sliderValue,
+      disabled: sliderValue === null,
       step: this._stepSize,
     });
     this._updateSetTemp(uiValue);
@@ -268,9 +270,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
   private _genSliderValue(
     stateObj: ClimateEntity
-  ): [string | number, string, string] {
+  ): [string | number | null, string, string] {
     let sliderType: string;
-    let sliderValue: string | number;
+    let sliderValue: string | number | null;
     let uiValue: string;
 
     if (
@@ -290,11 +292,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       );
     } else {
       sliderType = "min-range";
-      sliderValue = stateObj.attributes.temperature;
-      uiValue =
-        stateObj.attributes.temperature !== null
-          ? String(stateObj.attributes.temperature)
-          : "";
+      sliderValue = Number.isFinite(Number(stateObj.attributes.temperature))
+        ? stateObj.attributes.temperature
+        : null;
+      uiValue = sliderValue !== null ? String(sliderValue) : "";
     }
 
     return [sliderValue, uiValue, sliderType];
@@ -495,6 +496,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         .rs-bar.rs-transition.rs-second {
           z-index: 20 !important;
         }
+        #thermostat .rs-readonly {
+          z-index: 10;
+          top: auto;
+        }
         #thermostat .rs-inner.rs-bg-color.rs-border,
         #thermostat .rs-overlay.rs-transition.rs-bg-color {
           background-color: var(--paper-card-background-color, white);
@@ -512,6 +517,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         #set-temperature {
           font-size: var(--set-temperature-font-size);
           margin-bottom: var(--set-temperature-margin-bottom);
+          min-height: 1.2em;
         }
         .title {
           font-size: var(--title-font-size);