Fix more info slider in iOS (#20586)

src/components/ha-control-slider.ts

@@ -67,6 +67,9 @@ export class HaControlSlider extends LitElement {
   @property({ attribute: "tooltip-mode" })
   public tooltipMode: TooltipMode = "interaction";
 
+  @property({ attribute: "touch-action" })
+  public touchAction?: string;
+
   @property({ type: Number })
   public value?: number;
 
@@ -152,7 +155,7 @@ export class HaControlSlider extends LitElement {
   setupListeners() {
     if (this.slider && !this._mc) {
       this._mc = new Manager(this.slider, {
-        touchAction: this.vertical ? "pan-x" : "pan-y",
+        touchAction: this.touchAction ?? (this.vertical ? "pan-x" : "pan-y"),
       });
       this._mc.add(
         new Pan({

src/components/ha-control-switch.ts

@@ -33,6 +33,9 @@ export class HaControlSwitch extends LitElement {
   // SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in)
   @property({ type: String }) pathOff?: string;
 
+  @property({ attribute: "touch-action" })
+  public touchAction?: string;
+
   private _mc?: HammerManager;
 
   protected firstUpdated(changedProperties: PropertyValues): void {
@@ -73,7 +76,7 @@ export class HaControlSwitch extends LitElement {
   setupListeners() {
     if (this.switch && !this._mc) {
       this._mc = new Manager(this.switch, {
-        touchAction: this.vertical ? "pan-x" : "pan-y",
+        touchAction: this.touchAction ?? (this.vertical ? "pan-x" : "pan-y"),
       });
       this._mc.add(
         new Swipe({

src/dialogs/more-info/components/lights/light-color-temp-picker.ts

@@ -78,6 +78,7 @@ class LightColorTempPicker extends LitElement {
 
     return html`
       <ha-control-slider
+        touch-action="none"
         inverted
         vertical
         .value=${this._ctPickerValue}

src/state-control/cover/ha-state-control-cover-position.ts

@@ -41,6 +41,7 @@ export class HaStateControlCoverPosition extends LitElement {
 
     return html`
       <ha-control-slider
+        touch-action="none"
         vertical
         .value=${this.value}
         min="0"

src/state-control/cover/ha-state-control-cover-tilt-position.ts

@@ -78,6 +78,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
 
     return html`
       <ha-control-slider
+        touch-action="none"
         vertical
         .value=${this.value}
         min="0"

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -106,6 +106,7 @@ export class HaStateControlCoverToggle extends LitElement {
 
     return html`
       <ha-control-switch
+        touch-action="none"
         vertical
         reversed
         .checked=${isOn}

src/state-control/fan/ha-state-control-fan-speed.ts

@@ -111,6 +111,7 @@ export class HaStateControlFanSpeed extends LitElement {
 
     return html`
       <ha-control-slider
+        touch-action="none"
         vertical
         min="0"
         max="100"

src/state-control/ha-state-control-toggle.ts

@@ -108,6 +108,7 @@ export class HaStateControlToggle extends LitElement {
 
     return html`
       <ha-control-switch
+        touch-action="none"
         .pathOn=${this.iconPathOn || mdiFlash}
         .pathOff=${this.iconPathOff || mdiFlashOff}
         vertical

src/state-control/light/ha-state-control-light-brightness.ts

@@ -59,6 +59,7 @@ export class HaStateControlLightBrightness extends LitElement {
 
     return html`
       <ha-control-slider
+        touch-action="none"
         vertical
         .value=${this.value}
         min="1"

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -118,6 +118,7 @@ export class HaStateControlLockToggle extends LitElement {
 
     return html`
       <ha-control-switch
+        touch-action="none"
         vertical
         reversed
         .checked=${this._isOn}

src/state-control/valve/ha-state-control-valve-position.ts

@@ -40,6 +40,7 @@ export class HaStateControlValvePosition extends LitElement {
 
     return html`
       <ha-control-slider
+        touch-action="none"
         vertical
         .value=${this.value}
         min="0"

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -106,6 +106,7 @@ export class HaStateControlValveToggle extends LitElement {
 
     return html`
       <ha-control-switch
+        touch-action="none"
         vertical
         reversed
         .checked=${isOn}