Disable slider functionality for some buttons?

[Thyraz]

Hi,

I would like to disable the slider control for my shades.
The reason is, that I want to prevent them from being controlled accidentally.
My family members seem to be prone to erroneous clicks when they try to control the Smart Home through the dashboard in the living room. 😛
Not that much of a problem with lights, but not so cool when they extend the awning when it's raining or windy ...

I still wanna keep the look for indicating how far the shade is opened and also the buttons for open / stop / close.

Is this somehow possible?
I tried to set pointer-events: none; for the slider element.
But it seems like the click-handling is done on the main element and I don't want the buttons to stop working ...

Any help is highly appreciated. 🙏

[MrBearPresident]

Have you seen #928 ??

[Thyraz]

Thanks a lot for the quick reply. 🙂

I guess the idea is to use a simple state button and then add the progress functionality as described in addition to manually some added sub-buttons?

I hoped there would be an easy hack to remove the event-listener maybe, but it's definitely a good idea. 👍

[MrBearPresident]

It will be less tricky and much more reliable than any other solution I can think of.
Yes another toggle in the menu, could also do this.
But below the hood we would need to do more effort than this is.

[MrBearPresident]

something like :

type: custom:bubble-card
card_type: button
button_type: state
entity: cover.test_cover_cover
styles: |-
  :host{
      --color-ok: #36A1D3AA ;
      --color-bar: var(--color-ok);
      --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
  }

  .bubble-button-card-container {
      background: linear-gradient(
    to right, 
    var(--color-bar) 0%, 
    var(--color-bar) ${Math.round(hass.states['cover.test_cover_cover'].attributes.current_position)}%,
    var(--color-background) ${Math.round(hass.states['cover.test_cover_cover'].attributes.current_position)}%,
    var(--color-background) 100%
  ) !important;
  }


  .bubble-sub-button-1{
    border-radius: 32px 0px 0px 32px;
  }
  .bubble-sub-button-2{
    border-radius: 0px;
    margin-left: -10px;
    margin-right:-10px;
  }
  .bubble-sub-button-3{
    border-radius: 0px 32px 32px 0px;
  }    


    
  .bubble-icon {
    color: ${state === 'open' ? 'var(--color-ok)' : ''} !important;
  }
slider_live_update: false
sub_button:
  - entity: cover.lounge_blind
    show_icon: true
    icon: mdi:arrow-down
    state_background: false
    tap_action:
      action: call-service
      target:
        entity_id: cover.test_cover_cover
      service: cover.close_cover
  - entity: cover.lounge_blind
    icon: mdi:square-outline
    state_background: false
    tap_action:
      action: call-service
      target:
        entity_id: cover.test_cover_cover
      service: cover.stop_cover
  - entity: cover.lounge_blind
    icon: mdi:arrow-up
    state_background: false
    tap_action:
      action: call-service
      target:
        entity_id: cover.test_cover_cover
      service: cover.open_cover
card_layout: large
show_attribute: true
attribute: current_position

---

^{If this solves your problem, mark it as solved and close the discussion.}

[Thyraz]

Thank you very much that you took the time and already provided a working example. 🙂👍