nicufarmache / lovelace-big-slider-card Goto Github PK
View Code? Open in Web Editor NEWA card with a big slider for light entities in Home Assistant
License: MIT License
A card with a big slider for light entities in Home Assistant
License: MIT License
Originally posted by @ironcrafter54 in #5 (reply in thread)
Checklist:
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:
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
Checklist:
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.
Unavailable lights look like they are on
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.
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:
Release with the issue:
v1.1.2
Is your feature request related to a problem? Please describe.
I’m trying to get an HA set up that is as close as possible to HomeKit. When sliding the brightness slider, the light does not turn on and go to the brightness. Sometimes, I am trying to set the brightness based on eye, and the brightness does not change until I let go of the slider
Describe the solution you'd like
Brightness should change while the slider is sliding. Currently, it only changes when you let go of the slider
Describe alternatives you've considered
Using homekit
Additional context
Add any other context or screenshots about the feature request here.
Originally posted by ironcrafter54 March 2, 2023
I came across this card a few days ago and it's great. One thing that I think would make this card even cooler if you had an option to match the slider color to the color of the light, like the mushroom cards.
Add an option to set the icon
Add text_color
option
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)
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 !
Checklist:
Release with the issue: 2024.7.0
Last working release (if known): 2024.6.4
Browser and Operating System: Chrome v126, HAOS 12.4
Description of problem: After 2024.7.0 Update Bars are gone from all over HA. Until 2024.6.4 it worked perfect. Here is the image after the update.
Edit: I found what it's fault. It's height, if have height and after height number have "px" ex. 10px it brokes! If you delete the px it works as before the update. On border_radius it works only with "px" as height before update. Please fix it if you can for misunderstanding. Thanks!
Javascript errors shown in the web inspector (if applicable):
Additional information:
Checklist:
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?
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!
Checklist:
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.
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.
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.
Will it be possible to expand this front end hac to fan entities as well? I really like the way your slider looks
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!
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:
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:
Checklist:
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.
It would be very useful to have an option such as vertical true to have the slider be vertical instead of horizontal.
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.
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.
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.
Entity name should not word wrap -> it pushes the secondary text off the card, becomes unreadable, and looks terrible.
Icon alignment - the big slider icon has less padding to the left than the tile card icon.
Thanks again for the great card. It really gave my lighting dashboard a fresh new look!
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.
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.
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.
Originally posted by fcassata January 14, 2024
Thanks for making this card available, absolutely love it! Is there a way for me to keep the icon color constant, and not have the opacity change with the brightness of the connected light entity?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.