MainUI: change icon on state of custom widget

[chris3 (Chris)]

hey everybody,
i created a small slider widget. The icon should change based on the state - like it’s in the default slider widget, but its not working for now.

uid: f_sliderlist
tags: []
props:
  parameters:
    - default: Enter title here
      description: The list item text
      label: Text
      name: text
      required: false
      type: TEXT
    - context: item
      description: An slider item
      label: Slider Item
      name: item
      required: true
      type: TEXT
    - default: oh:slider
      description: The icon to display
      label: Icon
      name: icon
      required: false
  parameterGroups: []
timestamp: Jan 6, 2022, 5:17:16 PM
component: oh-list-item
config:
  title: =props.title
  label: =props.label
  icon: =props.icon
slots:
  after:
    - component: f7-row
      config:
        style:
          align-items: center
          gap: 2px
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.item
                    style:
                      width: 100px
                      top: 0px

Has somebody an idea whats wrong?
thanks

[JustinG]

oh-list-item also has a property to tell it to use icons dynamically: iconUseState.

oh-list-item - List Item

However, there’s a catch. By default, an oh-list-item is not linked to any particular item. So, just as with an oh-toggle-item or an oh-slider-item you also have to specify the item you want to use for the item state even though this will not affect any of the other parts of the oh-list-item.

component: oh-list-item
config:
  title: =props.title
  label: =props.label
  icon: =props.icon
  iconUseState: true
  item: =props.item

[chris3 (Chris)]

ahh perfect, it works . Thank your very much