Slider Option for light brightness

[hAMMERlized]

Hey man,

as I can speak just for me, my dashboard has to be as comfortable as possible which means every click that's not needed is too much.

So how about a slider option for light brightness (single bulbs and groups) in the home overview and light section. I think I have seen some code snippets in the yaml files with a slider option already? Not sure, but it doesn't work for me.

[neilimixamo]

True, the "light" cards include a non-clickable slider that displays the brightness percentage of their entity. While it is possible to make the slider clickable, it would introduce the following limitations:

• A short click on the Name or Label of the card would no longer open the more-info dialog.
• To overcome this limitation, we could explore the option of opening the more-info dialog through a long press on the Name/Label or even a long press on the icon.
• The slider would have limited clickable areas in terms of width. Specifically, it would not be clickable around the circular icon on the left or around the right chevron inside the light_expandable card.

Would you like to experiment with the slider functionality despite these constraints?

[hAMMERlized]

Ok i didn't know that. Right now the "more-info" actions open up the core popup where i can adjust the brightness right and change a color, right?

1) Concerning changing the colors: To be honest personally i am not changing the color so often, at least i did not at all, after i have set the right colors up. But if someone would like to, there is enough space in the scenes area in the footer, isn't it?

2) No clickable name, icon and lable: As far as i know using the slider card the light turns on as soon asmi am sliding the brightness from 0% upward. Same for turning the lights off, sliding down until 0%.

So this way we could turn the lights on and off easily. But for still using the "more-info" action you could implement it by the way you said. Ever a long press or a quick double tap (personally prefered).

Of course if it helps you i will give the slider function a try. Just let me know how or what to do!

[neilimixamo]

Yes, currently, a tap action on the Name/Label part will open the core light dialog, which is indeed comprehensive and user-friendly. As you mentioned, it is still possible to include up to 5 scenes per view, which should help avoid opening multiple lights to get it done .

It's ok, I will produce a clickable slider light card for you to test ;)

[neilimixamo]

Here are the previews of slider versions that allow direct brightness control, with two limitations:

• Sliding action only takes effect when the finger is released,
• Name & Label area is no longer clickable. However, the lamp can still be toggled with a single click on the icon, and the "more-info" dialog now opens with a double click on the icon.

light_slider.yaml

```yaml light_slider: variables: entity: name: label_on: 'On' #not used label_off: 'Off' #can be changed show_icon: false show_name: false triggers_update: all styles: card: - height: 10.8vh - border-radius: 27px - cursor: none - --mdc-ripple-press-opacity: 0 - box-shadow: none - background-color: | [[[ if (variables.entity && states[variables.entity].state === 'on') { return 'var(--light-background-inactive)'; } return 'var(--light-background-inactive)'; ]]] custom_fields: slider_visible: card: type: custom:my-slider-v2 entity: | [[[ if (variables.entity) { return variables.entity; } else { return ''; } ]]] intermediate: false styles: card: - position: absolute - height: 10.8vh - width: 45vw - background-color: transparent - border-radius: 27px - box-shadow: none - bottom: 0vh - left: 0vw container: - width: 100% - height: 10.8vh - position: absolute - overflow: hidden - border-radius: 5px track: - width: 100% - height: 10.8vh - position: absolute - border-radius: 27px - top: 0px - background-color: | [[[ if (variables.entity && states[variables.entity].state === 'on') { return 'var(--light-slider-track-active)'; } return 'var(--light-slider-track-inactive)'; ]]] progress: - height: 10.8vh - background: | [[[ if (variables.entity && states[variables.entity].state === 'on') { return 'var(--light-background-active)'; } return 'var(--light-background-inactive)'; ]]] - border-radius: 27px 0px 0px 27px - top: 0px - width: 0.00% thumb: - height: 10.8vh - background: white - right: 0px - width: 0px buttons: card: type: horizontal-stack cards: - type: custom:button-card # ICON entity: | [[[ if (variables.entity ) { return variables.entity; } else { return 'null'; } ]]] show_name: false icon: size: 50% styles: card: - height: 6vh - width: 6vh - background-color: | [[[ if (variables.entity && states[variables.entity].state === 'on') { return 'var(--light-icon-background-active)'; } return 'var(--light-icon-background-inactive)'; ]]] - border-radius: 50% - box-shadow: none - top: 1.6vh - left: 3.2vw - cursor: none - --mdc-ripple-press-opacity: 0 icon: - color: | [[[ if (variables.entity && states[variables.entity].state === 'on') { return 'var(--light-icon-active)'; } return 'var(--light-icon-inactive)'; ]]] - type: custom:button-card # NAME & LABEL name: | [[[ if (variables.name) { return variables.name; } else if (variables.entity) { return states[variables.entity].attributes.friendly_name; } else { return 'Name'; } ]]] entity: | [[[ if (variables.entity ) { return variables.entity; } else { return 'null'; } ]]] label: | [[[ if (variables.entity) { var state = states[variables.entity].state; if (state === 'on') { var brightness = states[variables.entity].attributes.brightness; if (brightness) { if (brightness !== undefined) { return Math.round((brightness)/255*100) + '%'; } else { return variables.label_off; } } else { return variables.label_on; } } else if (state === 'off') { return variables.label_off ; } else { return "Unavailable"; } } else { return "Label" } ]]] show_icon: false show_label: true styles: card: - height: 10.8vh - width: 29.2vw - background-color: transparent - border-radius: 0% - box-shadow: none - top: -0.85vh - left: 1.0vw - cursor: none - --mdc-ripple-press-opacity: 0 name: - font-size: 14px - font-weight: 500 - justify-self: start - padding-left: 4vw label: - font-size: 12px - font-weight: 400 - justify-self: start - padding-left: 4vw - padding-top: 0.5vh tap_action: action: more-info slider_invisible: card: type: custom:my-slider-v2 entity: | [[[ if (variables.entity) { return variables.entity; } else { return ''; } ]]] intermediate: false allowTapping: true styles: card: - position: absolute - height: 10.8vh - width: 45vw - background-color: transparent - border-radius: 27px - box-shadow: none - bottom: 0vh - left: 0vw container: - width: 100% - height: 10.8vh - position: absolute - overflow: hidden - border-radius: 5px track: - width: 100% - height: 10.8vh - position: absolute - border-radius: 27px - top: 0px - background-color: 'transparent' progress: - height: 10.8vh - background: 'transparent' - border-radius: 27px 0px 0px 27px - top: 0px - width: 0.00% thumb: - height: 10.8vh - background: white - right: 0px - width: 0px buttons_invisible: card: type: horizontal-stack cards: - type: custom:button-card # ICON entity: | [[[ if (variables.entity ) { return variables.entity; } else { return 'null'; } ]]] show_name: false icon: size: 50% styles: card: - position: absolute - height: 6vh - width: 6vh - background-color: transparent - border-radius: 50% - box-shadow: none - bottom: -2vh - left: 3.2vw - cursor: none - --mdc-ripple-press-opacity: 0 icon: - color: 'transparent' tap_action: action: toggle double_tap_action: action: more-info ```

light_slider_expandable.yaml

```yaml light_slider_expandable: variables: entity: name: label_off: 'Off' expandable_towards: show_icon: false show_name: false triggers_update: all styles: card: - height: 10.8vh - border-radius: 27px - cursor: none - --mdc-ripple-press-opacity: 0 - box-shadow: none - background-color: | [[[ if (variables.entity && states[variables.entity].state == 'on') { return 'var(--light-background-inactive)'; } return 'var(--light-background-inactive)'; ]]] custom_fields: slider_visible: card: type: custom:my-slider-v2 entity: | [[[ if (variables.entity) { return variables.entity; } else { return ''; } ]]] intermediate: false styles: card: - position: absolute - height: 10.8vh - width: 45vw - background-color: transparent - border-radius: 27px - box-shadow: none - bottom: 0vh - left: 0vw container: - width: 100% - height: 10.8vh - position: absolute - overflow: hidden - border-radius: 5px track: - width: 100% - height: 10.8vh - position: absolute - border-radius: 27px - top: 0px - background-color: | [[[ if (variables.entity) { var state = states[variables.entity].state; var brightness = states[variables.entity].attributes.brightness; if (state === 'on' && brightness) { return 'var(--light-slider-track-active)'; } } return 'var(--light-slider-track-inactive)'; ]]] progress: - height: 10.8vh - background: | [[[ if (variables.entity) { var state = states[variables.entity].state; var brightness = states[variables.entity].attributes.brightness; if (state === 'on' && brightness) { return 'var(--light-background-active)'; } } return 'var(--light-background-inactive)'; ]]] - border-radius: 27px 0px 0px 27px - position: relative - top: 0px - width: 0.00% thumb: - height: 10.8vh - background: white - position: relative - right: 0px - width: 0px buttons: card: type: horizontal-stack cards: - type: custom:button-card # ICON entity: | [[[ if (variables.entity ) { return variables.entity; } else { return 'null'; } ]]] show_name: false icon: size: 50% styles: card: - height: 6vh - width: 6vh - background-color: | [[[ if (variables.entity) { var state = states[variables.entity].state; var brightness = states[variables.entity].attributes.brightness; if (state === 'on' && brightness) { return 'var(--light-icon-background-active)'; } } return 'var(--light-icon-background-inactive)'; ]]] - border-radius: 50% - box-shadow: none - top: 1.6vh - left: 3.85vw - cursor: none - --mdc-ripple-press-opacity: 0 icon: - color: | [[[ if (variables.entity && states[variables.entity].state == 'on') { return 'var(--light-icon-active)'; } return 'var(--light-icon-inactive)'; ]]] - type: custom:button-card # NAME name: | [[[ if (variables.name) { return variables.name; } else if (variables.entity) { return states[variables.entity].attributes.friendly_name; } else { return 'Name'; } ]]] entity: | [[[ if (variables.entity ) { return variables.entity; } else { return 'null'; } ]]] label: | [[[ if (variables.entity) { var state = states[variables.entity].state; if (state === 'on') { var brightness = states[variables.entity].attributes.brightness; if (brightness !== undefined && brightness !== null) { return Math.round((brightness)/255*100) + '%'; } else { return variables.label_off; } } else if (states[variables.entity].state === 'unavailable') { return 'Unavailable'; } else { return variables.label_off; } } else { return "Label"; } ]]] show_icon: false show_label: true styles: card: - height: 10.8vh - width: 20.3vw - background-color: transparent - border-radius: 0% - box-shadow: none - top: -0.85vh - left: 1.65vw - cursor: none - --mdc-ripple-press-opacity: 0 name: - font-size: 14px - font-weight: 500 - justify-self: start - padding-left: 4vw label: - font-size: 12px - font-weight: 400 - justify-self: start - padding-left: 4vw - padding-top: 0.5vh tap_action: action: more-info - type: custom:button-card # CHEVRON icon: mdi:chevron-right color: var(--chevron-color) size: 80% styles: card: - background-color: transparent - height: 10.8vh - width: 3.5vh - top: -1vh - right: 0.5vw - box-shadow: none - cursor: none - --mdc-ripple-press-opacity: 0 tap_action: action: navigate navigation_path: '[[[ return variables.expandable_towards ]]]' slider_invisible: card: type: custom:my-slider-v2 entity: | [[[ if (variables.entity) { return variables.entity; } else { return ''; } ]]] intermediate: false allowTapping: true styles: card: - position: absolute - height: 10.8vh - width: 45vw - background-color: transparent - border-radius: 27px - box-shadow: none - bottom: 0vh - left: 0vw container: - width: 100% - height: 10.8vh - position: absolute - overflow: hidden - border-radius: 5px track: - width: 100% - height: 10.8vh - position: absolute - border-radius: 27px - top: 0px - background-color: 'transparent' progress: - height: 10.8vh - background: 'transparent' - border-radius: 27px 0px 0px 27px - top: 0px - width: 0.00% thumb: - height: 10.8vh - background: white - right: 0px - width: 0px buttons_invisible: card: type: horizontal-stack cards: - type: custom:button-card # ICON entity: | [[[ if (variables.entity ) { return variables.entity; } else { return 'null'; } ]]] show_name: false icon: size: 50% styles: card: - position: absolute - height: 6vh - width: 6vh - background-color: transparent - border-radius: 50% - box-shadow: none - bottom: 3.2vh - left: 3.6vw - cursor: none - --mdc-ripple-press-opacity: 0 icon: - color: 'transparent' tap_action: action: toggle double_tap_action: action: more-info - type: custom:button-card # CHEVRON icon: mdi:chevron-right color: var(--chevron-color) size: 80% styles: card: - position: - background-color: transparent - height: 10.8vh - width: 3.5vh - top: -1vh - left: 35vw - box-shadow: none - cursor: none - --mdc-ripple-press-opacity: 0 tap_action: action: navigate navigation_path: '[[[ return variables.expandable_towards ]]]' ```

[hAMMERlized]

Okay, what should I do with this 2 yaml files to test it?

[neilimixamo]

Sorry, as GitHub doesn't let me upload .yaml files, you have to manually create those two files (light_slider.yaml and light_slider_expandable.yaml) next to the other template cards in dashboards/quick_look_mobile/templates/cards.

Restart Home Assistant

Then, go to the 4.1_light_bulbs.yaml and choose the template of your choice (light, light_slider, light_expandable, light_slider_expandable)

[hAMMERlized]

Ah okay. Will do that later that day give some feedback. Thanks.

[neilimixamo]

Hi, did you have a positive experience with the light_slider card? Do you have any other suggestions to share, or can we consider this issue closed? :)