[Feature]: Add an option to send updates while sliding in light card

[zanna-37]

Is your feature request related to a problem?

In the light card, the slider only send the update when it is released.

Describe the solution you'd like

I would like an option to send immediate updates while sliding. See also the option intermediate in https://github.com/AnthonMS/my-cards

Describe alternatives you've considered

No response

Additional context

No response

[piitaya]

The option is not recommended because it may generate too many updates. I do not prefer to add unstable option to Mushroom.

[zanna-37]

You can debounce it, so send the last value every 500ms. Anyway I use the one from AnthonMS and it works even without debouncing. But if you are still concerned you can add a warning, or put an experimental flag. In the end, the user should decide what works for them.

[zanna-37]

What do you think about the debouncing approach @piitaya? Or leaving it as an (experimental) yaml-only option.

[twodice]

FWIW I'd also love this option for media players - it's the only thing I'm still using the ULM cards for.

[twodice]

If it helps anyone else, here's my mushroom-cards-esque card using my-slider and parts of ui-lovelace-minimalist and tweaked: (note that it has a custom input_boolean for mute and not the default behavior)

type: custom:button-card
styles:
  grid:
    - grid-template-areas: '''item1'' ''item2'''
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr  1fr
    - row-gap: 8px
  card:
    - border-radius: var(--border-radius)
    - box-shadow: var(--box-shadow)
    - padding: 12px
custom_fields:
  item1:
    card:
      type: custom:button-card
      styles:
        icon:
          - color: rgba(var(--color-theme),0.2)
        label:
          - justify-self: start
          - align-self: start
          - font-weight: bold
          - font-size: 12px
          - filter: opacity(40%)
          - margin-left: 12px
        name:
          - align-self: end
          - justify-self: start
          - font-weight: bold
          - font-size: 14px
          - margin-left: 12px
        state:
          - justify-self: start
          - align-self: start
          - font-weight: bold
          - font-size: 12px
          - filter: opacity(40%)
          - margin-left: 12px
        img_cell:
          - background-color: rgba(var(--color-theme),0.05)
          - border-radius: 50%
          - place-self: center
          - width: 42px
          - height: 42px
        grid:
          - grid-template-areas: '''i n'' ''i l'''
          - grid-template-columns: min-content auto
          - grid-template-rows: min-content min-content
        card:
          - border-radius: var(--border-radius)
          - box-shadow: none
          - border-radius: var(--border-radius) var(--border-radius) 0px 0px
          - padding: 0px
      icon: mdi:speaker
      name: Mac
      entity: input_boolean.media_player_enabled
      label: '[[[return states["input_boolean.media_player_enabled"].state]]]'
      show_label: true
      state:
        - styles:
            icon:
              - color: rgba(var(--color-blue),1)
            label:
              - color: rgba(var(--color-blue-text),1)
            name:
              - color: rgba(var(--color-blue-text),1)
            img_cell:
              - background-color: rgba(var(--color-blue), 0.2)
            card:
              - background-color: rgba(var(--color-background-blue), var(--opacity-bg))
          id: 'on'
          value: 'on'
  item2:
    card:
      type: custom:my-slider
      entity: media_player.player_name
      radius: 16px
      height: 42px
      mainSliderColor: silver
      secondarySliderColor: rgba(var(--color-grey),0.2)
      thumbHorizontalPadding: 0px
      thumbVerticalPadding: 0px
      thumbWidth: 0px
      intermediate: true
      card_mod: null
      style: |
        ha-card {
          border-radius: 14px;
          box-shadow: none;
        }