Icon (with state on/ off) slider button card

Configuration Frontend
1

Hi HA-Community,
Im pretty new here and Im reading a lot concerning HA Dashboards.
I created a slider button card:

type: custom:slider-button-card
entity: light.dg_schlafzimmer_play_2
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  toggle_on_click: false
  force_square: false
  show_attribute: false
  state_content:
    - last-changed
show_name: true
state: true
compact: true
state:
  - value: 'on'
    icon: mdi:lightbulb-on
    show: true
    use_state_color: true
    tap_action:
      action: more-info
  - value: 'off'
    icon: mdi:lightbulb-off
    show: true
    use_state_color: true
    tap_action:
      action: more-info
action_button:
  mode: custom
  icon: mdi:power
  show: true
  show_spinner: true
  tap_action:
    action: toggle
name: Play 2   -
state_content:
  - last-changed

Something is wrong because the state: value: ‘on’ or value: ‘of’ code, so that I get different icons is maybe wrong… I don`t know.

The orignal code for this button:

image

and code:

type: custom:slider-button-card
entity: light.dg_schlafzimmer_play_2
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  toggle_on_click: false
  force_square: false
  show_attribute: false
  state_content:
    - last-changed
show_name: true
state: true
compact: true
icon:
  show: true
  use_state_color: true
  tap_action:
    action: more-info
  state:
    - value: 'on'
      icon: mdi:lightbulb-on
    - value: 'off'
      icon: mdi:lightbulb-off
action_button:
  mode: custom
  icon: mdi:power
  show: true
  show_spinner: true
  tap_action:
    action: toggle
name: Play 2   -
state_content:
  - last-changed

works fine…

Maybe its something simple... but I dont see it :frowning:

Thank you so much for your help and have a nice evening!
Kind regards
Niklas

2

sorry i don’t understand what you’re asking.
what are you trying to do?

3

I do not see the state as an option for this card. Are you able to provide the source of your code?

4

Good morning,

the code is the first one. On the left side there is the lightbulb-icon. This icon have two charakteristics: 1. lightbulb-on and 2. lightbulb-off.

And my idea was to use these two icons for the state. When the light is on then the code use the lightbulb-on and when the light is off then the code should use the lightbulb-off icon. Only the icon on the left side should change…

The source of my code is my custom button card… and there it works:

type: custom:button-card
entity: light.dg_schreibtisch_playbars
name: Playbars
size: 43%
state:
  - value: 'on'
    icon: mdi:lightbulb-on
    color: var(--button-card-light-color)
    styles:
      card:
        - font: 14px Arial
        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - transition: all 2s ease
  - value: 'off'
    icon: mdi:lightbulb-off
    color: var(--button-card-light-color)
    styles:
      card:
        - font: 14px Arial
tap_action:
  action: toggle
hold_action:
  action: more-info

Thanks very much and kind regards
Niklas

5

You have switched from a slider-button-card to a button-card?

With a button card it’s an easy process to change the icon

Now

image
image746×120 8.45 KB

Original Post

image
image718×138 7.79 KB

The code is not interchangeable between these custom card.

These are the available options with the slider card