Hello,

Trying to use this template for a light without brightness control. So the light just turn on/off.
Button works, but the state is not displayed correctly when turned on.

The 'big-slider-card' gets following css classes
--bsc-percent:NaN%; --bsc-icon-color:var(--bsc-color); --bsc-brightness:0%; --bsc-brightness-ui:50%;
So it seems the light is turned off.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.1.4

Last working release (if known):
NA

Browser and Operating System:
Windows Chrome
iPadOS Safari

Description of problem:
When using min setting on a light entity turning off the light shows the slider value stuck at the min value instead of going down to zero like you’d expect for an off light. As a result it becomes quite difficult to tell a light is on, with only the colour of the icon as an indicator.

Light on with dimmer level:

Light off:

When brightness is an individual entity, as opposed to a attribute of another entity, this does not work. For instance Lametric Time and Sky both have a standalone brightness entity (IE, number.sky_brightness), not a brightness attribute, so it always reads off and doesn’t set the brightness. In this cases entity state needs to change as opposed to attribute value, which is not working.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Browser and Operating System:
Google Cast, Nest Hub

Description of problem:
Card not available on Google Nest Hub "Custom element doesn't exist: big-slider-card."

Javascript errors shown in the web inspector (if applicable):
No access to web inspector.

Discussed in #49

Is your feature request related to a problem? Please describe.
Yes

Describe the solution you'd like
I want you add bar height because if i change the height of bar with CSS (card-mod etc.) I have this problem: https://i.imgur.com/Vbmu6Ay.gif on every refresh on every tab that i have the bar. It loads first the original height and after that the CSS fixed height. So it's like have bug/lag...

Additional context
I see your latest update that you add border_width and I was happy about.. but after some time it was clear to me what's the purpose of this... Please add a general height and it will be perfect!

Color transition animation does not work properly on the home assistant mobile app, Same issue in my previous report except the fix for safari the web browser did not fix the mobile app.

Discussed in #1

Add an option to set the icon

Discussed in #24

^{Originally posted by jazzyisj April 17, 2023}
What a great card! Makes you wonder why the UI dev's didn't do this to the tile card, so intuitive! Thank you! Looking forward to seeing if you can extend it to other entities (I see a few requests for that).

Would you consider standardizing some of the UI of the big slider card with the hass tile card? I'd like to be able to use them interchangeably in my UI but the inconsistencies are bothersome.

1. Card background should really have been the standard card background color. (ha-card-background). I was able to accomplish this for myself with card_mod, but I think it should come out of the box that way for consistency, allowing the user to customize if desired.

2. Card size - the big slider card height is slightly smaller than a tile card and it looks terrible in a grid when used together. Haven't been able to figure this one out with card_mod yet.

3. Entity name should not word wrap -> it pushes the secondary text off the card, becomes unreadable, and looks terrible.

4. Icon alignment - the big slider icon has less padding to the left than the tile card icon.

5. A halo around the entity icon would be great to add a little contrast between the icon and the background when entity is on and for a consistent look with the tile card. Especially if one uses the state-light-active-color for the slider color. Also, the icon when no rgb support should also be state-light-active-color, not white for consistency with other hass cards.

6. Personally I would have used the state-light-active-color as the standard active slider color instead of the primary color for consistency with other cards. Of course easily remedied with the color: option of the slider card, it's just a thought.

7. This is more of a functionality request. I have several timed lights in my home. Currently I display any active light timers in a separate card (see screenshot). I'd love to be able to put those timers in the secondary text slot somehow.

Thanks again for the great card. It really gave my lighting dashboard a fresh new look!

Discussed in #31

Add text_color option

Hello,

i can't differentiate if my light is really "off" or "offline" because the slider shows "off" on both occasions.

I would like to see "Unavailable" or another indication that the device is out of reach or offline and therefor i wouldn't react with the slider (toggle, hold or slide)

Thank you.

Great work. Look a lot nicer when they other options out there. But if i have a lot of Them, i can't scoll on my mobil without changeing the light. Maybe it's possible to only change the light then scolling sideways. Hope it make sensor.

Originally posted by @ironcrafter54 in #5 (reply in thread)

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I want to Match the icon and Text size to my other used cards

Describe the solution you'd like
A clear and concise description of what you want to happen.

An Option to Set the size of the Icons and Text

I want to be able to slide all the way left to set the light to its minimal brightness but keep the light on. To turn the light off, I prefer to use hold or tap but not sliding.

E.g. slider-entity-row by Thomas Lovén has "min" and "max" options that can be used for that purpose.
Thank you!

Is your feature request related to a problem? Please describe.
With a recent update on Google Home / Nest speakers with Spotify, the volume is now much louder, so I need much more precise control of the speakers/groups.

Describe the solution you'd like
Just the ability to control the volume or volume_level attribute with the card.

Describe alternatives you've considered

Is your feature request related to a problem? Please describe.
I don't like the default colors of icons. I like that this card lets me change icon color, but it only changes color when the entity is off. I'd love an icon_off_color attribute as well.

Describe alternatives you've considered
I've considered setting it with card_mod, but having it as an option directly in the card here would be nice.

Unavailable lights look like they are on

• #37
• #19
• #7

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
2023.3.6
Last working release (if known):

Browser and Operating System:
Windows 11, Vivaldi 5.7.2921.65

Description of problem:

It seems this card does not work with the color_temp or color_temp_kelvin attribute.

The code I use:

type: custom:big-slider-card
entity: light.chevet_amis_geneve
name: Chevet amis Genève
attribute: color_temp_kelvin
colorize: true
icon: mdi:light-recessed
tap_action:
  action: none
min: 2500
max: 6500

For some reason, the slider has no effect. Same problem when using the color_temp attribute and adapting the min and max values accordingly. Light works fine, calling light.turn_on and setting color_temp via dev tools services works. Am I missing something obvious here?

Discussed in #2

Discussed in #5

Checklist:

• [Y] I updated to the latest version available
• [Y] I cleared the cache of my browser

Release with the issue:
1.1.4 (and all previous)

Last working release (if known):
N/A

Browser and Operating System:
Windows / Firefox latest (and all previous)

Description of problem:
When I long press the card (hold_action) it shows the default 'more-info', but when i release the mouse button it closes the popup window again if the mouse cursor is not hoovering over the popup which is often the case in a desktop situation.

Javascript errors shown in the web inspector (if applicable):
N/A

Additional information:
I've tried it on Windows / Chrome, this browser does not show this particular behavior.
I've made a default HA button with long press, it also does not show this behavior. I did notice that the button only showed the long press action on button release where as the big-slider-card shows it on a delayed time while the button is still press down.

Is your feature request related to a problem? Please describe.
In order to integrate the card better with other button cards, it would be nice to have an option to make it a 'square' shape

Describe the solution you'd like
Just have an optional "button" setting to render the card as a square

Describe alternatives you've considered
n/a

Additional context
Thank you so much already for this card, it is really nice !

Best slider card around
I'd like to be able to change the slider background color in its off state to better integrate it into other cards with other colors.

Removing and coloring the border would be nice too

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.1.4

Last working release (if known):
n/a

Browser and Operating System:

Description of problem:
Lights that are switched off appear as "off" although it should read "aus" (German locale). HA is set to Germany/German in settings.

Javascript errors shown in the web inspector (if applicable):

Additional information:

home-assistant/frontend#12628

I recently updated my entire UI config to comply with the new standard of using data: rather than service_data: for entity actions and discovered that the Big Slider Card has not updated yet to support the new syntax. It's the only card I've come across so far that doesn't. Since you link to the updated documentation, it might lead to some confusion.

New syntax (doesn't work):

tap_action:
  action: call-service
  service: script.some_script
  data: "some data"

Old syntax (works):

tap_action:
  action: call-service
  service: script.some_script
  service_data: "some data"

Checklist:

• [ X] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue:
v1.1.2

Will it be possible to expand this front end hac to fan entities as well? I really like the way your slider looks

Would it be possible to have it when the card is long pressed it would switch between setting the brightness, colour temp and rgb colour? (assuming available for the lamp)

It would be very useful to have an option such as vertical true to have the slider be vertical instead of horizontal.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
2023.3.6

Last working release (if known):

Browser and Operating System:
Google Chrome 112.0.5615.49, Windows 11

Description of problem:

When changing the brightness of a WLED light, the card sometimes shows a higher brightness percentage than the Home Assistant more-info card.

In this example, WLED reports a brightness level of 97 out of 255, which is 97/255 = 38.04%. It seems like this card rounds the brightness up to 39%, while Home Assistant only rounds up if the brightness level is >= *.5%, so it rounds down to 38%.

Javascript errors shown in the web inspector (if applicable):

Additional information: