Wow.
I never thought of this, but you actually CAN do that!
Youāll need a mirror that sets the correct MIME-type, though.
Try https://cdn.jsdelivr.net/gh/thomasloven/lovelace-slider-entity-row/slider-entity-row.js instead.
I wouldnāt recommend it, for a variety of reasons, though. But it does work most of the time.
Thanks! Can you explain why itās not recommended?
I have noticed that when the slider-entity-row is combined with a conditional entity row the state values is not displayed.
type: entities
entities:
- type: custom:slider-entity-row
entity: input_number.download_speed_threshold
full_row: true
max: 50
step: 1
card_mod:
style: |
.state {
font-weight: 600;
font-size: 120%;
}
- type: conditional
conditions:
- entity: input_number.download_speed_threshold
state_not: '0'
row:
type: custom:slider-entity-row
entity: input_number.download_speed_threshold
full_row: true
max: 50
step: 1
title: Sliders
show_header_toggle: false
This is how it looks like.
However if I set the hide_state parameter, the state is shown.
type: entities
entities:
- type: custom:slider-entity-row
entity: input_number.download_speed_threshold
full_row: true
max: 50
step: 1
card_mod:
style: |
.state {
font-weight: 600;
font-size: 120%;
}
- type: conditional
conditions:
- entity: input_number.download_speed_threshold
state_not: '0'
row:
type: custom:slider-entity-row
entity: input_number.download_speed_threshold
full_row: true
hide_state: false
max: 50
step: 1
card_mod:
style: |
.state {
font-weight: 600;
font-size: 120%;
}
title: Sliders
show_header_toggle: false
The state is shown on the conditional row. However, the formatting is done correctly.
By playing around with card-mod, I was able to format the state value for the conditional row.
type: entities
entities:
- type: custom:slider-entity-row
entity: input_number.download_speed_threshold
full_row: true
max: 50
step: 1
card_mod:
style: |
.state {
font-weight: 600;
font-size: 120%;
}
- type: conditional
card_mod:
style:
slider-entity-row$ div: |
.state {
font-weight: 600;
font-size: 120%;
}
conditions:
- entity: input_number.download_speed_threshold
state_not: '0'
row:
type: custom:slider-entity-row
entity: input_number.download_speed_threshold
full_row: true
hide_state: false
max: 50
step: 1
title: Sliders
show_header_toggle: false
Just thought of sharing this.
Hi there,
I want to use the slider inline within a multiple-entity-row. But the input_number I want to see as slider just shows up as number:
- type: horizontal-stack
style: |
ha-card {margin-top: -15px; }
cards:
- type: entities
entities:
- type: custom:multiple-entity-row
entity: binary_sensor.irrigation_unlimited_c2_z1
show_state: false
secondary_info: last-changed
entities:
- icon: mdi:toggle-switch-outline
name: Aktivierung Zone
state_color: true
tap_action:
action: call-service
service: irrigation_unlimited.toggle
service_data:
entity_id: binary_sensor.irrigation_unlimited_c2_z1
- type: custom:slider-entity-row
entity: input_number.iu_zone_1_run_time
full_row: true
max: 60
step: 1
card_mod:
style: |
.state {
font-weight: 600;
font-size: 120%;
}
- icon: mdi:gesture-tap
name: Beregne Zone
state_color: true
tap_action:
action: call-service
service: script.iu_start_bewaesserung
service_data: {}
target: {}
entity_id: binary_sensor.irrigation_unlimited_c2_z1
Any help would be greatly appreciated!
Cheers,
Hauke
Maybe that will help you further
type: entities
entities:
- type: custom:multiple-entity-row
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info.pointer {
color: #018752;
font-size: 16px;
font-weight: bold !important;
text-overflow: unset !important;
white-space: unset !important;
}
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: #018752;
--switch-checked-button-color: #bf5e5e;
}
entity: binary_sensor.irrigation_unlimited_c1_z1
state_color: true
show_state: false
entities:
- attribute: current_duration
name: Dauer
hide_unavailable: true
- attribute: time_remaining
name: Rest
hide_unavailable: true
- attribute: percent_complete
name: Komplett
unit: '%'
- entity: input_number.iu_zone_1_run_time
name: Zeit
format: precision0
- entity: switch.zone_1
toggle: true
name: false
- type: custom:slider-entity-row
entity: input_number.iu_zone_1_run_time
full_row: true
step: 1
hide_state: true
state_color: true
show_header_toggle: false
Thankās for thatā¦ I will give it a tryā¦
Meanwhile I tried this:
The first button activates/deactivates the zone, the second contains the slider and the last one fires the event to run and starts blinking in a different colorā¦ Still missing the remaining % and durationā¦ So I will try to combine your approach with mineā¦ 
I would love a bigger and better cover control. Then it will be easier to hit. Please see attached screenshot for a mock up. Thank you!
Shutter card is very elegant but it is a bit big and sliding it down or up is a bit difficult when the rest of the page scroll vertically. It is also not possible to just tap a place at the icon and have the cover go to that point. You have to grab the edge and slide it:
Hi,
With a light dimmer. Would it be possible to have clicking the light bulb to the left toggle the light instead of opening the menu? This would eliminate the need for toggle switch to the right of the slider and give me more resolution on the slider.
Same is happening to meā¦ any update about it?
Thanks
It returned to normal after a few days. Maybe a cache problem ā¦
Hi!
Sorry for a noob question but how can I add slider also to color-temp?
Hi everyone
I am trying to populate the slider using auto-entities but it seems unsupported. Anybody ever tried this before?
type: vertical-stack
cards:
- type: custom:auto-entities
filter:
include:
- entity_id: climate.eq_3_*
options:
entity: this.entity_id
card:
type: custom:slider-entity-row
results in
No entity specified.
entities:
- entity: climate.eq_3_living_room
- entity: climate.eq_3_dining_room
- entity: climate.eq_3_master_bedroom
- entity: climate.eq_3_office
- entity: climate.eq_3_guest_toilet
- entity: climate.eq_3_kitchen
- entity: climate.eq_3_master_bathroom
- entity: climate.eq_3_walk_in
type: custom:slider-entity-row
This works for me:
type: vertical-stack
cards:
- type: custom:auto-entities
filter:
include:
- entity_id: light.*
options:
type: custom:slider-entity-row
card:
type: entities
A slider-entity-row is replacement for an entity row item in an entities card. It canāt be used elsewhere.
Is it possible to modify your example to show just one slider that then controls all the entities at once?
i.e. set all thermostats to 18 Ā°C when I go out etc.?
Edit: I do know there is the possibility of using groups, but I am trying to avoid static groups. Otherwise, everytime I add a device that fits a profile, I have to manually add it to the respective group(s).
Not that I know of. Youāll either need to manually manage a group (at least for this example case, how often will you be adding/removing thermostats?) or write some script or automation that can select these entities and use a number input helper. Off the top of my head, Iām not immediately sure how youād do that, although I think itās possible without actually trying first 
FWIW, groups can be really useful, and although you have to manually add/remove things to them from yaml, you can reload the groups from the Server Controls section of the Configuration ui without having to restart Home Assistant entirely, so itās not THAT much a painā¦ just the same, if the HA devs ever do another month of āWhat the heckā, editing groups/group entities from the UI would be a good request.
Iāve been using slider-entity-row for a long time, but recently Iāve been having issues with it loading. When I load the page with slider-entity-row in a browser (Firefox - Desktop or Mobile, Chrome Desktop) the page loads fine and I can see the sliders, but then after a second they disappear and I get the dreaded red box āCustom element doesnāt exist: slider-entity-row.ā When this happens, in the log I see:
hacsfiles/lovelace-slider-entity-row/slider-entity-row.js:1:1 SyntaxError: redeclaration of let o
I had a similar problem with state-switch and I got that to go away by removing it and reinstalling it. Unfortunately with slider-entity-row Iāve done that and I still have the same issue. And now as Iām writing this I tried one other thing (while working in Chrome Desktop)ā¦enabling the debug tools and then doing an āEmpty Cache and Hard Reloadā gets slider-entity-row to load, but then state-switch doesnāt load. Tried this repeatably and still the same. Closed the debug tools and repeatably reloading the page causes one to load and the other to fail with the āelement doesnāt existā error. And in the log I see the āUncaught SyntaxError: Identifier āeā has already been declaredā for whichever component didnāt load. It seems there might be a conflict between these two components. Iām running current versions of both components via HACS and Iām currently running HA 2021.11.3
@thomasloven Whatās your take on this? It seems when I reload the page either slider-entity-row or state-switch initially shows up, but then one or the other disappears. The behavior is pretty consistent in either Chrome or Firefox. Which ever one doesnāt load always shows a āUncaught SyntaxError: Identifier āeā has already been declaredā error in the log. Iām presuming thereās a conflict between these two components when they are in the same scope. (?) Thanks.
Hi
How can i get the buttons for L M H on a fan like you have?
