Vertical Slider

[tsmithf2020]

Hi. im looking for vertical slider, at the moment i found 3 but none of them work for i what want.
3 that i found.

GitHub - Deejayfool/hass-shutter-card: Shutter card for Home Assistant...

works best for shutters.

GitHub - AnthonMS/my-cards: Bundle of my custom Lovelace cards for Home...

this one works, but i cant put the numeric state and also i cant name it

GitHub - wrodie/mixer-card: Mixer card for Home Assistant

this one i can manage to work, i tried HACS install, and manual install, and doesnt work with a input_number value.

im making a DMX control throw MQTT, its working but i want vertical slider that i can name, and show numeric state fo the slider.

if anyone have any hidden vertical slider ahhahah

thanks!

[douwehoeben (Douwe)]

What kind of vertical slider are you looking for?
If you go to Settings > Helpers and create/select your input_number.your_entity. Here you can change the display to a slider or field.

Then you can use this in an entities card. See: Entities card - Home Assistant

If you are using yaml in stead of the UI you could add this to your dashboard:

- type: entities
  entities:
  - entity: input_number.your_entity
    name: "Sliding al them ways" 
    icon: mdi:slide
    tap_action:
      action: none

[tsmithf2020]

i currently have slider, but from left to right

i want them to be from up and down.
i put the code you send me, but it doesnt work, maybe im missing something.

im trying to do a mixer card, something like this but with name and values.

this is a horizontal stack with this code in it.

type: custom:my-slider-v2
entity: input_number.dmx_dimmer
vertical: true
show_name: true
showMin: true
showMax: true
sliderMin: 0
styles:
card:
- height: 200px
- width: 70px
track:
- background: |
[[[
if (entity.state == “off”) return “red”;
else return “purple”;
]]]

[nolesw (Nolan)]

[plasma2002 (Plasma)]

Those look great!

How can this be achieved?

[plasterer (irwin gray)]

yip, I’d be interested in how you did this as well… Looks fantastic

[pyzone]

As for 04.25 :
Upper controls - GitHub - tolnai/hacs_cover_slider: Slider cover card for Home Assistant
Bottom - standard HA card
Covers are my own DIY.
Each slider is for separate entity, no scripts or automations.
At least for a while

[plasma2002 (Plasma)]

Yet another great looking implementation!

I see that these are for cover entities though… any chance they’d be able to be used for something like lights?

[pyzone]

Oh, sorry!
I was so happy to find just something and didn’t notice a topic subject.

[pyzone]

By the way…
I think there’s a real possibility to translate cover’s action calls into calls for yuour lights. Something like MQTT proxy.
As a draft crazy idea:
create (define in configuration.yaml) an MQTT cover, define all topics for state, position etc. (open=on, close=off, position=brightness) , then create MQTT sensors on the same command topics as in cover and then create an automation where translate state changes into MQTT calls.
Or, even simpler - when define a MQTT cover - assign to it apropriate topics a same names as your light have. Really I don’t know is this a legal way for HA.
of course, all this is for the case if your light supports MQTT.

[pyzone]

just 1st googling:

Using Home Assistant as MQTT proxy

[LiQuid_cOOled (Not really a...)]

You be better off simply modifying the CSS to rotate the sliders within a card using:

transform: rotate(90deg) or

This card and direction: bottom-top

GitHub - mattieha/slider-button-card: A button card with integrated slider

type: horizontal-stack
cards:
  - type: custom:slider-button-card
    entity: light.xxxx
    slider:
      direction: bottom-top
      background: gradient
      use_state_color: true
    action_button:
      mode: custom
      show: true
      tap_action:
        action: toggle
    icon:
      show: false
      use_state_color: false
  - type: custom:slider-button-card
    entity: light.xxxx
    slider:
      direction: bottom-top
      background: gradient
      use_state_color: true
    action_button:
      mode: custom
      show: true
      tap_action:
        action: toggle
    icon:
      show: false
      use_state_color: false
      icon: ""

Width, color, info and more can be customized

[pyzone]

unfortunately, I’m not very good in CSS. MQTT is much more familiar to me
I agree it is the more correct way.
And thank for the link.
Will try thic card too. Maybe it will look better.

[LiQuid_cOOled (Not really a...)]

No worries, all suggestion should be considered.

[plasma2002 (Plasma)]

@LiQuid_cOOled

You be better off simply modifying the CSS to rotate the sliders within a card using:

transform: rotate(90deg)

I mean… sure, kinda?

also, doing the transform doesn’t work on finger tracking. You still need to swipe lef/right to adjust the transformed element

[LiQuid_cOOled (Not really a...)]

Well yeah it needs more than one line of code. What’s your point?

That is why I also suggested the slider-button

[plasma2002 (Plasma)]

that “simply modifying the CSS to rotate the sliders within a card using transform” is not the sought-after solution here.

[LiQuid_cOOled (Not really a...)]

Thanks for your input

[LiQuid_cOOled (Not really a...)]

In case you didn’t think rotate wouldn’t work with additional code. A rough example…

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr 1fr
  margin: 0px 0px 0px 0px
cards:
  - type: entities
    entities:
      - type: custom:slider-entity-row
        entity: light.night_stand
        card_mod:
          style:
            hui-generic-entity-row $: |
              .pointer {
                display: none;
                }
            .: |
              ha-slider{
                 --_inactive-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 10px))!important;
                 --_active-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 10px))!important;
                 transform: rotate(-90deg);
                 margin-top: 100px;
                 --_inactive-track-height: 50px ;
                 --_active-track-height: 50px ;
                 --md-slider-handle-height: 28px ;
                 --md-slider-handle-width: 12px ;                 
                 --_label-container-color: transparent ;
                 --_label-text-color: transparent ;
                 --_active-track-color: {{"#%02x%02x%02x" %
              state_attr(config.entity,"rgb_color") }} ;
                 --_inactive-track-color: grey ;
                 --md-slider-handle-color: dodgerblue; 
                      }
              ha-slider:after {
                content: "Night Stand";
                transform: rotate(90deg);
                width: 70px;
                position: absolute;
                right: 70px;
                top: 6px;
                font-size: 10px;
               }        
    card_mod:
      style: |
        ha-card {
          height: 150px !important;
          width: 120px;
          background: transparent;
          border: none;
          }
  - type: entities
    entities:
      - type: custom:slider-entity-row
        entity: light.tv_lightstrip
        card_mod:
          style:
            hui-generic-entity-row $: |
              .pointer {
                display: none;
                }
            .: |
              ha-slider{
                 --_inactive-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 10px))!important;
                 --_active-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 10px))!important;
                 transform: rotate(-90deg);
                 margin-top: 100px;
                 --_inactive-track-height: 50px ;
                 --_active-track-height: 50px ;
                 --md-slider-handle-height: 28px ;
                 --md-slider-handle-width: 12px ;                 
                 --_label-container-color: transparent ;
                 --_label-text-color: transparent ;
                 --_active-track-color: {{"#%02x%02x%02x" %
              state_attr(config.entity,"rgb_color") }} ;
                 --_inactive-track-color: grey ;
                 --md-slider-handle-color: dodgerblue; 
                      }
              ha-slider:after {
                content: "TV Lightstrip";
                transform: rotate(90deg);
                width: 70px;
                position: absolute;
                right: 70px;
                top: 6px;
                font-size: 10px;
               }        
    card_mod:
      style: |
        ha-card {
          height: 125px !important;
          width: 100px;
          background: transparent;
          border: none;
          margin-left: -80px !important;
         }
  - type: entities
    entities:
      - type: custom:slider-entity-row
        entity: light.pc_lights
        card_mod:
          style:
            hui-generic-entity-row $: |
              .pointer {
                display: none;
                }
            .: |
              ha-slider{
                 --_inactive-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 10px))!important;
                 --_active-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 10px))!important;
                 transform: rotate(-90deg);
                 margin-top: 100px;
                 --_inactive-track-height: 50px ;
                 --_active-track-height: 50px ;
                 --md-slider-handle-height: 28px ;
                 --md-slider-handle-width: 12px ;                 
                 --_label-container-color: transparent ;
                 --_label-text-color: transparent ;
                 --_active-track-color: {{"#%02x%02x%02x" %
              state_attr(config.entity,"rgb_color") }} ;
                 --_inactive-track-color: grey ;
                 --md-slider-handle-color: dodgerblue; 
                      }
              ha-slider:after {
                content: "PC Lights";
                transform: rotate(90deg);
                width: 70px;
                position: absolute;
                right: 70px;
                top: 15px;
                font-size: 10px;
               }        
    card_mod:
      style: |
        ha-card {
          height: 125px !important;
          width: 100px;
          background: transparent;
          border: none;
          margin-left: -160px !important;
         }

[LiQuid_cOOled (Not really a...)]

An outside of the box solution…

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - features:
      - type: custom:service-call
        entries:
          - type: slider
            unit_of_measurement: "%"
            value_attribute: brightness
            tap_action:
              action: perform-action
              perform_action: light.turn_on
              data:
                brightness_pct: "{{ value | int }}"
              target:
                entity_id: light.night_stand
            entity_id: light.night_stand
            range:
              - 0
              - 100
            step: 1
            thumb: default
            styles: |
              :host {
                {% if is_state(config.entity, "on") %}
                --color: rgb({{ state_attr(config.entity, "rgb_color") }})
                {% endif %}
               }
              .tooltip {
                {% if is_state(config.entity, "off") %}
                display: none;
                {% endif %}
               }
    type: tile
    entity: light.night_stand
    features_position: bottom
    vertical: false
    tap_action:
      action: none
    icon_tap_action:
      action: more-info
    hide_state: true
    card_mod:
      style: |
        hui-card-features {
         transform: rotate(-90deg) !important;
         width: 140px;
         height: 130px;
          left: 10px;
          }
          
  - features:
      - type: custom:service-call
        entries:
          - type: slider
            unit_of_measurement: "%"
            value_attribute: brightness
            tap_action:
              action: perform-action
              perform_action: light.turn_on
              data:
                brightness_pct: "{{ value | int }}"
              target:
                entity_id: light.pc_lights
            entity_id: light.pc_lights
            range:
              - 0
              - 100
            step: 1
            thumb: default
            styles: |
              :host {
                {% if is_state(config.entity, "on") %}
                --color: rgb({{ state_attr(config.entity, "rgb_color") }})
                {% endif %}
               }
              .tooltip {
                {% if is_state(config.entity, "off") %}
                display: none;
                {% endif %}
               }
    type: tile
    features_position: bottom
    vertical: false
    tap_action:
      action: none
    icon_tap_action:
      action: more-info
    hide_state: true
    entity: light.pc_lights
    card_mod:
      style: |
        hui-card-features {
         transform: rotate(-90deg) !important;
         width: 140px;
         height: 130px;
          left: 10px;
          }
  - features:
      - type: custom:service-call
        entries:
          - type: slider
            unit_of_measurement: "%"
            value_attribute: brightness
            tap_action:
              action: perform-action
              perform_action: light.turn_on
              data:
                brightness_pct: "{{ value | int }}"
              target:
                entity_id: light.tv_lights
            entity_id: light.tv_lights
            range:
              - 0
              - 100
            step: 1
            thumb: default
            styles: |
              :host {
                {% if is_state(config.entity, "on") %}
                --color: rgb({{ state_attr(config.entity, "rgb_color") }})
                {% endif %}
               }
              .tooltip {
                {% if is_state(config.entity, "off") %}
                display: none;
                {% endif %}
               }
    type: tile
    features_position: bottom
    vertical: false
    tap_action:
      action: none
    icon_tap_action:
      action: more-info
    hide_state: true
    entity: light.tv_lights
    card_mod:
      style: |
        hui-card-features {
         transform: rotate(-90deg) !important;
         width: 140px;
         height: 130px;
         left: 10px;
          }          
layout:
  grid-template-columns: 1fr 1fr 1fr
  margin: 0px 0px 0px 0px