Is it possible to add a (group) light dim slider to a entities card or a other card in lovelace?
If not it would be very handy.
Make a light group in home assistant the normal way:
Then add it as an entity to any card you desire. Click on the light and a window should appear with your slider.
If you are trying to get the direct slider to appear, then you need to follow the one of many examples on this forum using an input_number.
1 Like
I’m wondering if we could surface the brightness slider in the light more info dialog as an element directly on the entity card.
This would save alot of additional sliders and automations to replicate this already existing behavior.
Love it! hope it would be possible to do it for an entire group and keep the possibility to change individual lights.
Thanks @RomRider,
I ended up creating my own, because I had some slightly different requirements, mainly that I wanted the light brightness to also trigger the state of a seperate switch I used to control them.
So ended up with this, I have 3 zha bulbs in a light group. There is a wall switch that triggers the light group on and off.
- type: entities
title: study
show_header_toggle: false
entities:
- sensor.study_temperature
- switch.study_lights_switch
- entity: light.study_lights_group
type: custom:light-slider
switchEntity: switch.study_lights_switch
–
class LightSlider extends Polymer.Element {
static get template() {
return Polymer.html`
<style>
:host {
display: flex;
align-items: center;
}
.flex {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
min-width: 0;
}
ha-paper-slider {
width: 100%;
margin-left: 6px;
}
</style>
<state-badge
state-obj="[[stateObj]]"
override-icon="[[icon]]"
on-click="stopPropagation">
</state-badge>
<div class="flex"
on-click="stopPropagation">
<ha-paper-slider
min="[[min]]"
max="[[max]]"
value="{{value}}"
ignore-bar-touch
on-change="selectedValue">
</ha-paper-slider>
</div>
`
}
static get properties() {
return {
_hass: Object,
_config: Object,
isOn: { type: Boolean },
stateObj: { type: Object, value: null },
icon: { type: String, value: 'hass:brightness-5' },
switchEntity: { type: String, value: null },
min: { type: Number, value: 0 },
max: { type: Number, value: 255 },
attribute: { type: String, value: 'brightness' },
value: Number,
};
}
setConfig(config) {
this._config = config;
}
set hass(hass) {
this._hass = hass;
this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
if (this.stateObj) {
if (this.stateObj.state === 'on') {
this.value = this.stateObj.attributes[this.attribute];
this.isOn = true;
} else {
this.value = this.min;
this.isOn = false;
}
}
}
selectedValue(ev) {
const value = parseInt(this.value, 10);
const param = { entity_id: this.stateObj.entity_id };
const switch_param = { entity_id: this._config.switchEntity };
if (Number.isNaN(value)) return;
if (value === 0) {
this._hass.callService('light', 'turn_off', param);
if (this._config.switchEntity) {
this._hass.callService('switch', 'turn_off', switch_param);
}
} else {
param[this.attribute] = value;
this._hass.callService('light', 'turn_on', param);
if (this._config.switchEntity) {
this._hass.callService('switch', 'turn_on', switch_param);
}
}
}
stopPropagation(ev) {
ev.stopPropagation();
}
}
customElements.define('light-slider', LightSlider);
1 Like
Lovely!
I’m using this for a lot of lights.
But: Is it possible to set a tap_action, e.g. to toggle, for each row?
1 Like
Hi Petro, what about if in this light group one is a light entity and the another one it is a switch? ( This specifyc case is because i have in my kitchen two lights controlled by hue and three downlights controlled by wemos with rele):
But i would like to have in my general view this:
I mean whatever light is switched on i can see it thanks to this light card.
1 Like
Sorry for being a bit thick but I am still very much learning but could you post the steps to getting this too work in Lovelace. I downloaded the slider-entity-row.js and put it in my www folder. I am not sure what to do next
Thank you
Thank you for the link,
I will give this a try.
Update: I eventually got this too work but the only way was to use the Raw Config Editor to manually create the card with the slider. I tried adding an “entity Card” and adding the code using the card editor but it didn’t work. I am not 100% sure if they way I did it is correct but it works lol
Just recently I have been seeing the following error in my log relating to the custom light slider
http://192.168.50.90:8123/local/slider-entity-row.js?v=1:4:0 SyntaxError: Unexpected keyword ‘const’. Const declarations are not supported in strict mode.
Does anyone know what can be done to eliminate this error?
Thanks
Try purging your browser cache and report back. Whenever I see weird messages like this, it’s always my silly browser cache mucking things up.
OK Thank You,
I will try that
I love this!
Could an option be added to hide the icon?
Very nice @winter - thank you for that!
I have one small issue, it’s not working in custom:auto-entities cards.
The slider just won’t appear.
Is this something you can solve? Would be awesome 
1 Like
Hey, I actually dont use this anymore, I now use the standard lovelace light addin. Sorry.
@winter is there in the meantime a possibility to add a slider out of the box?
Or only by using type: light ?
Hi, EXACTLY what I need:
But how do I add (where and what) the 2nd code snippet in your post?
I currently get:
appreciate the help
hello all, it is possible to dimmer two lights using only one slider with this component?