How to change from a slider to buttons?

[ssamos10 (Stefan Samos)]

Hello!

I recently bought an Upsy Desky to help move my desk up and down. I would love to be able to control it in a nice and aesthetic way. If it is possible, can I change a slider to buttons?

To further specify what I mean, take a slider as an example. The slider has values ranging from 76-125m. I would like to have a button that goes up and one that goes down. When pressed, the up button will take the status of the current height sensor and add 5m to it. If I press and hold it, it will continuously add 5m until I let go and reach my desired height. Same goes for the down button, which will subtract 5m from the current state of the sensor. Also, the sensor which updates height is separate from the one to set height, therefore I must find a way to make these interlock together.

Thanks in advance for your help and best of wishes for y’all at home.

Some images to help the case:

The setup is Home Assistant OS, running using x86_64 ISO, using Lovelace UI mode.

[ssamos10 (Stefan Samos)]

[NathanCu (Nathan Curtis)]

This is a VERY prelimary version of the controls I’m building for mine:

This is the YAML:

you need vertical stack, horizontal stack and Mushroom template to make it work.

type: vertical-stack
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.office_desk_desk_height
    name: Current Height
    layout: vertical
    fill_container: false
  - type: custom:mushroom-number-card
    entity: number.office_desk_target_desk_height
    layout: vertical
    name: Target Height
    fill_container: false
    secondary_info: none
    display_mode: buttons
    icon: mdi:bullseye-arrow
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Preset 1
        secondary: >-
          {{ states('input_number.office_desk_preset_1') | float(0) | round(1)
          }} in.
        icon: '{{state_attr(''script.office_desk_store_and_set_preset_1'', ''icon'')}}'
        entity: button.office_desk_preset_1
        layout: vertical
        tap_action:
          action: call-service
          service: button.press
          data: {}
          target:
            entity_id: button.office_desk_preset_1
        secondary_info: none
        hold_action:
          action: call-service
          service: script.office_desk_store_and_set_preset_1
          target: {}
        double_tap_action:
          action: none
        fill_container: true
        icon_color: >-
          {% set deskheight = states('sensor.office_desk_desk_height') |
          float(0) | round(1) %}

          {% set deskpreset1 = states('input_number.office_desk_preset_1') |
          float(0) | round(1) %}

          {% if deskheight == deskpreset1 %}
            blue
          {% else %}
            grey
          {% endif %}
      - type: custom:mushroom-template-card
        primary: Sit
        secondary: >-
          {{ states('input_number.office_desk_preset_2') | float(0) | round(1)
          }} in.
        icon: '{{state_attr(''script.office_desk_store_and_set_preset_2'', ''icon'')}}'
        entity: button.office_desk_preset_2
        layout: vertical
        tap_action:
          action: call-service
          service: button.press
          data: {}
          target:
            entity_id: button.office_desk_preset_2
        secondary_info: none
        hold_action:
          action: call-service
          service: script.office_desk_store_and_set_preset_2
          target: {}
        double_tap_action:
          action: none
        fill_container: true
        icon_color: >-
          {% set deskheight = states('sensor.office_desk_desk_height') |
          float(0) | round(1) %}

          {% set deskpreset2 = states('input_number.office_desk_preset_2') |
          float(0) | round(1) %}

          {% if deskheight == deskpreset2 %}
            blue
          {% else %}
            grey
          {% endif %}
      - type: custom:mushroom-template-card
        primary: Preset 3
        secondary: >-
          {{ states('input_number.office_desk_preset_3') | float(0) | round(1)
          }} in.
        icon: '{{state_attr(''script.office_desk_store_and_set_preset_3'', ''icon'')}}'
        entity: button.office_desk_preset_3
        layout: vertical
        tap_action:
          action: call-service
          service: button.press
          data: {}
          target:
            entity_id: button.office_desk_preset_3
        secondary_info: none
        hold_action:
          action: call-service
          service: script.office_desk_store_and_set_preset_3
          target: {}
        double_tap_action:
          action: none
        fill_container: true
        icon_color: >-
          {% set deskheight = states('sensor.office_desk_desk_height') |
          float(0) | round(1) %}

          {% set deskpreset3 = states('input_number.office_desk_preset_3') |
          float(0) | round(1) %}

          {% if deskheight == deskpreset3 %}
            blue
          {% else %}
            grey
          {% endif %}
      - type: custom:mushroom-template-card
        primary: Stand
        secondary: >-
          {{ states('input_number.office_desk_preset_4') | float(0) | round(1)
          }} in.
        icon: '{{state_attr(''script.office_desk_store_and_set_preset_4'', ''icon'')}}'
        entity: button.office_desk_preset_4
        layout: vertical
        tap_action:
          action: call-service
          service: button.press
          data: {}
          target:
            entity_id: button.office_desk_preset_4
        secondary_info: none
        hold_action:
          action: call-service
          service: script.office_desk_store_and_set_preset_4
          target: {}
        double_tap_action:
          action: none
        fill_container: true
        icon_color: >-
          {% set deskheight = states('sensor.office_desk_desk_height') |
          float(0) | round(1) %}

          {% set deskpreset4 = states('input_number.office_desk_preset_4') |
          float(0) | round(1) %}

          {% if deskheight == deskpreset4 %}
            blue
          {% else %}
            grey
          {% endif %}

You’ll need 4 scripts to make this work: to save the presets (press and hold on one of the preset buttons calls this script - so you need it x4 or modify it to accept a button number as a variable and do one script)

alias: Office Desk - Store and Set Preset 1
sequence:
  - service: input_number.set_value
    data:
      value: "{{ states('sensor.office_desk_desk_height') | float(0) | round(1) }}"
    target:
      entity_id: input_number.office_desk_preset_1
  - service: button.press
    data: {}
    target:
      entity_id: button.office_desk_set_preset_1
mode: single
icon: mdi:numeric-1-box-multiple-outline

As you can see I’m storing each preset in an input number.

Version 2 will collapse the current and target height into one control I just haven’t gotten around to making the changes. (will use mushroom template)

Oh as is no-warranty