Reverse slider display

Feature Requests
1

Hi guys,

I have 2 curtains in my bedroom - they open/close in the opposite direction.
Is there a way to reverse the display of one of the sliders to make it more intuitive to use?

image
image721Ă—672 23.7 KB

2

Afaik this is not possible with the standard cards, but if you change this in a feature request, I’d certainly vote for it.

1 Like
3

Perhaps you can target the specific slider in CSS using a unique ID/class and rotate the slide 180 degrees?

1 Like
4

That is actually a very good suggestion, with card mod that would probably work perfectly.

5

Agree, good suggestion for those who know CSS :slight_smile: will take me some time to figure this out.

I’m pretty sure I am not alone who has curtains opening from left to right - having an option to reverse the slider display would be a great thing to have

6

See here: https://developer.mozilla.org/en-US/docs/Web/CSS/rotate

And apply that to the wrapper around the slider, or the specific slider itself…

7

It does not work with card-mod … unfortunately.

I tried

card_mod:
  style: |
    ha-control-slider {
      rotate: 180deg;
    }
  1. The ha-control-slider cannot be targeted (the custom css does not show up when inspecting the dashboard in the browser dev tools), possibly due to custom HTML element scoping, Idk
  2. (After changing the CSS in the browser dev tools, works at least until the next page reload) the slider is rendered “right-to-left”, but the touch targets are still “left-to-right” making it awkward to use.

Ideas welcome!

Cheers

8

CSS is not that simple, you have to provide the “full” path

          card_mod:
            style:
              hui-card-features $:
                hui-card-feature $:
                  hui-cover-position-card-feature$: |
                    ha-control-slider {
                      rotate: 180deg;
                    }

If it is before 2024.8.0, then

          card_mod:
            style:
              hui-card-features $:
                hui-cover-position-card-feature$: |
                  ha-control-slider {
                    rotate: 180deg;
                  }

CAVEAT: not tested
EDIT: tested, working, but weird :slight_smile:
image

EDIT2:

Using transform: scaleX(-1); is a bit better but still weird

          card_mod:
            style:
              hui-card-features $:
                hui-card-feature $:
                  hui-cover-position-card-feature$: |
                    ha-control-slider {
                      transform: scaleX(-1);
                    }

image

1 Like