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
9

Came across this thread when looking for a way to implement the same myself.
After some tinkering I came up with the following:

image
image818Ă—319 9.58 KB

Interacting with the slider also shows the tooltip correctly:

image
image419Ă—316 7.92 KB

Here’s the YAML for the right curtain card:

type: custom:vertical-stack-in-card
cards:
  - features:
      - type: cover-open-close
    type: tile
    name: Right
    entity: cover.livingroom_curtain_rear_right
    features_position: bottom
    vertical: false
    card_mod:
      style: |
        ha-card {
          --tile-color: var(--state-cover-active-color) !important;
        }
        .content {
          /* Needed for the name and state to line up with the Left card */
          padding-top: 20.45px !important;
          padding-bottom: 20.45px !important;
        }
  - type: tile
    entity: cover.livingroom_curtain_rear_right_inverted
    vertical: true
    features_position: bottom
    features:
      - type: cover-position
    card_mod:
      style:
        .: |
          .vertical {
            display: none !important;
          }
        hui-card-features$ hui-card-feature$ hui-cover-position-card-feature$ ha-control-slider$: |
          .container {
            --value-rtl: calc(1.0 - var(--value));
          }
          .slider .slider-track-bar {
            left: unset !important;
            right: 0px !important;
            transform: translate3d( calc((var(--value-rtl, 0) - 1) * var(--slider-size) * -1), 0, 0 ) !important;

            border-radius: 8px !important;
          }
          .slider .slider-track-bar::after {
            left: var(--handle-margin) !important;
            right: unset !important;
          }

Note that this does require you have an inverted template for the right side curtain. E.g. something like this:

cover:
  - platform: template
    covers:
      livingroom_curtain_rear_right_inverted:
        unique_id: livingroom_curtain_rear_right_inverted_template_cover_
        position_template: "{{ 100 - (state_attr('cover.livingroom_curtain_rear_right', 'current_position')|float(0)) }}"
        set_cover_position:
          - service: cover.set_cover_position
            data_template:
              entity_id: cover.livingroom_curtain_rear_right
              position: "{{ 100 - position }}"

This workaround is cumbersome and not ideal. We’d definitely be better off with a simple config option for slider features that would allow us to reverse the direction. But for the time being this works for me :slightly_smiling_face:.

2 Likes
10

created a card myself that almost does this. no tweaking just add your entity and it works

1 Like