The value_attribute of the selector options doesn’t matter when it comes to which option is selected. You probably need to change the selector overall value_attribute to a template and include logic there to change it based on fan information. Something like:
{{ "preset_mode" if state_attr("fan.sunroom_air_purifier", "preset_mode") != None else "state" }}
And then change the option of your second selection button to “on”.
thank you. As i still not sure 100% how this is working but it is working fine now for the auto mode. I tink i also need to update the template for the 100%speped. Could you help here aswell?
What’s the preset mode of your fan when it’s set to 100%? If it’s not null it may make more sense to use preset mode as the selector value attribute and set it’s options based on that.
so let me give you more information about the 3 selections:
on and the attribute preset_mode is auto and the attrribute percentage is nullon and the attribute preset_mode is null and the attribute percentage is 100off and the attribute prese_mode is null and the percentage is 0I currently have this “card” in a stack in card and have this in individual buttons and conditions. Maybe it is also easier to do this the the custom features?
The template I provided works for me. Here is the updated config for reference. Did you remember to change the 100% button option to “on”? If you don’t want anything to be highlighted when percentage is not 0 or 100 we can also modify the templates and options to use percentage as the value attribute when not in auto preset mode.
type: selector
entity_id: fan.schlafzimmer_luftreiniger
options:
- entity_id: fan.schlafzimmer_luftreiniger
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: auto
target:
entity_id: fan.schlafzimmer_luftreiniger
label: Auto
icon: mdi:fan-auto
option: auto
- entity_id: fan.schlafzimmer_luftreiniger
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 100
target:
entity_id: fan.schlafzimmer_luftreiniger
label: 100%
icon: mdi:fan-plus
option: '100'
hold_action:
action: perform-action
perform_action: fan.turn_on
target:
entity_id:
- fan.schlafzimmer_luftreiniger
data: {}
- entity_id: fan.schlafzimmer_luftreiniger
option: '0'
tap_action:
action: call-service
service: fan.turn_off
target:
entity_id: fan.schlafzimmer_luftreiniger
icon: mdi:fan-off
label: Aus
styles: |-
:host {
--color: var(--red-color);
}
value_attribute: >-
{{ "preset_mode" if state_attr("fan.schlafzimmer_luftreiniger", "preset_mode") !=
None else "percentage" }}
this is working fine for me now i had in the value_attribute in the else condition state. Thank you!
Is the ‘tap_action’ a templateable field? Am I doing something wrong?
I have the below code:
tap_action: |-
{% if is_state("sensor.pool_robot_state", "Off") %}
action: perform-action
perform_action: script.start_pool_robot
{% elif is_state("sensor.pool_robot_state", "Running") %}
action: turn_off
target:
entity_id:
- switch.pool_robot_plug
{% endif %}
but get the below error:
TypeError: Cannot assign to read only property '0' of string '{% if is_state("sensor.pool_robot_state", "Off") %}
action: turn_off
target:
entity_id:
- switch.pool_robot_plug
{% elif is_state("sensor.pool_robot_state", "Running") %}
action: turn_off
target:
entity_id:
- switch.pool_robot_plug
{% endif %}'
o (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:106929)
c.deepRenderTemplate (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:102083)
c.sendAction (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:96145)
c.onClick (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:165689)
c.onEnd (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:167597)
c.onMouseUp (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:103555)
F.handleEvent (/hacsfiles/service-call-tile-feature/custom-features-row.min.js:2:160919)
The entire object isn’t templatable, the individual child fields are. Try moving the template to the perform_action field (your elif case is incorrect and should be switch.turn_off) and the target and action fields out of the template like so.
tap_action:
action: perform-action
perform_action: |-
{% if is_state("sensor.pool_robot_state", "Off") %}
script.start_pool_robot
{% elif is_state("sensor.pool_robot_state", "Running") %}
switch.turn_off
{% else %}
none
{% endif %}
target:
entity_id:
- switch.pool_robot_plug
I just want to thank you Nerwyn for keeping custom integration community alive and sharing these amazing projects with us. I use your universal remote card all the time!
Hi Im new here but is there any way to remove the “main unit” of the tile I have two cases where it is kind of messing with my spacing. I can make it invisible but there is still the gap where it is supposed to be but im not able to change the rows and and over all size of the tile. Since I am unable to work around the problem, can I perhaps make some kind of tile without an enity and just a feature row with a custom function?
Sorry if the solution is obvious 
Im having a similar issue requiring manipulating the VALUE itself. I want to use a sensor with MM:SS format and would need to format the value to seconds so the slider can change position accordingly. Change the range is not working for that. Thank you
The slider requires a numerical value to track and modify. I do not want to make it so that the value of a custom feature can be further modified from a state or attribute as it would only be applicable for niche use cases or doable via helper entities instead. You could create a template sensor which converts the original sensor from MM:SS to just seconds, and then use that with the slider.
@Nerwyn I’m trying to customize an Input_Selector. I want to make the icon sizes larger and thus I need to increase the height of the row.
I cant get the row height to change or the spacing to change (CSS below). (screenshot shows this)
I’d also like to split the buttons/options into 2 rows but I didnt find a setting for that?
CSS is…
:host {
flexbasis: 200% !important;
--mdc-icon-size: 36px;
--feature-height 100px;
--feature-button-spacing 20px;
You’re missing a colon in your CSS on --feature-height. --feature-button-spacing isn’t a variable used by this project. You can set the gap on the custom selector host styles instead. You also don’t need to use !important in these styles, it’s added by the feature to custom user styles. It’s also flex-basis, not flexbasis.
Try these styles. You’ll have to adjust the custom-feature-button attributes to fit the options as you like. You may also have to adjust the parent card layout to fit the extra tall feature row if in sections view.
:host {
gap: 0 20px;
flex-wrap: wrap;
--feature-height: 100px;
}
custom-feature-button {
flex-grow: 1;
flex-basis: 20%;
height: calc(0.5 * var(--feature-height));
}
Its better but any of the item you put above didnt change anything. I’m using a Tile Card, does that matter?
The code below is the only things that impacted the visuals, the other settings did not.
Also, its not changing the Left/Right gaps, or adding rows?
:host {
gap: 0 20px;
flex-wrap: wrap;
--feature-height: 70px;
--mdc-icon-size: 36px;
}
Are you putting these styles at the row level or the selector level? They should be in the selector. And are you trying to add a gap between selector options (what my provided styles do), or increase the side margins of the entire selector?
I’m fumbling around, did not realize there are 2 separate options. Too many nested menus! I got it to where you see below
How can I reduce the gap between the icon and the label below?
also, any idea how to remove the header/title above the selector options (this is a tile card). thx for the help, this is just what I need!
How can I reduce the gap between the icon and the label below?
To do that, you’ll have to modify the label styles of each option individually. Add this to the CSS Styles field in the appearance panel of each individual option.
.label {
position: relative;
top: -16px;
}
also, any idea how to remove the header/title above the selector options (this is a tile card). thx for the help, this is just what I need!
Outside of the scope of what custom features can do, but you can do this with card-mod.
card_mod:
style: |
.container {
padding-top: 10px !important;
}
.content {
display: none !important;
}
huge thank you! Its a big challenge for a noobie when we literally need to learn 3 ‘new’ languages (YAML, JINJA, CSS) all at once to be proficient with dashboards and automations.
one last question… do you know the setting that will get rid of the buffer at the bottom? padding-bottom:10px !important; didnt work.
If you’re using sections view, in the layout tab of the card click on the menu and then Edit in YAML, and then set rows to a non-number like null or x. That should disable it from conforming to sections rows which should get rid of the extra tile card space.
