Addon: Input Number with + and - buttons to replace slider

@chrisgrou ,could you please share yours code? It looks awesome, something what I want for long time, but I have no idea where to start. Thx

I tried to remove some debug code, I hope I didn’t break anything.
The lovelace card is:

cards:
  - type: entities
    entities:
      - entity: input_number.water_heater_duration
        type: custom:numberbox-card
        name: 'Duration:'
        icon: false
        speed: 250
        border: false
        style: |
          .grid-left {
            font-variant: small-caps;
            font-size: 20px !important;
            font-weight: 300 !important;
          }
          .cur-num {
            font-size: 32px !important; 
            font-weight: 600 !important;
          }
    icon: mdi:water-boiler
    title: Water Heater
    style: |
      #states {
        padding: 10px 20px !important
      }
      ha-card {
        font-variant: small-caps;
      }
      .card-header {
        padding: 10px 8px !important;
      }
  - cards:
      - color: var(--st-mode-background, var(--secondary-background-color))
        color_type: card
        entity: input_select.water_heater_state
        show_icon: true
        icon: mdi:power
        name: 'Off'
        state:
          - color: '#8a8a8a'
            spin: false
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: 'Off'
          - color: var(--st-mode-background, var(--secondary-background-color))
            value: 'Off'
            operator: '!='
            styles:
              icon:
                - color: var(--secondary-text-color)
              name:
                - color: var(--secondary-text-color)
        styles:
          card:
            - height: 50px
            - color: var(--secondary-text-color)
          name:
            - font-size: 14px
            - padding-bottom: 0px
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.water_heater_state
            option: 'Off'
        type: custom:button-card
        style: |
          ha-card {
            --st-font-size-xl: 60px;
            --st-font-size-m: 16px;
            --st-spacing: 4px;
            font-variant: small-caps;
          }
      - color: var(--st-mode-background, var(--secondary-background-color))
        color_type: card
        entity: input_select.water_heater_state
        show_icon: true
        icon: mdi:fire
        name: Heat
        state:
          - color: '#f05454'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: Heat
          - color: var(--st-mode-background, var(--secondary-background-color))
            value: Heat
            operator: '!='
            styles:
              icon:
                - color: var(--secondary-text-color)
              name:
                - color: var(--secondary-text-color)
        styles:
          card:
            - height: 50px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 0px
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.water_heater_state
            option: Heat
        type: custom:button-card
        style: |
          ha-card {
            --st-font-size-xl: 60px;
            --st-font-size-m: 16px;
            --st-spacing: 4px;
            font-variant: small-caps;
          }
      - color: var(--st-mode-background, var(--secondary-background-color))
        color_type: card
        entity: input_select.water_heater_state
        show_icon: true
        icon: mdi:alarm
        name: Schedule
        state:
          - color: '#5eaaa8'
            styles:
              icon:
                - color: white
              name:
                - color: white
            value: Schedule
          - color: var(--st-mode-background, var(--secondary-background-color))
            value: Schedule
            operator: '!='
            styles:
              icon:
                - color: var(--secondary-text-color)
              name:
                - color: var(--secondary-text-color)
        styles:
          card:
            - height: 50px
            - color: '#03a9f4'
          name:
            - font-size: 14px
            - padding-bottom: 0px
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.water_heater_state
            option: Schedule
        type: custom:button-card
        style: |
          ha-card {
            --st-font-size-xl: 60px;
            --st-font-size-m: 16px;
            --st-spacing: 4px;
            font-variant: small-caps;
          }
    type: horizontal-stack
    styles:
      card:
        - '--keep-background': 'true'
  - type: custom:time-picker-card
    entity: input_datetime.water_heater_schedule_time
    hour_mode: 24
    hour_step: 1
    minute_step: 1
    second_step: 5
    name: 'Scheduled to run at:'
    layout:
      embedded: false
      name: inside
      align_controls: center
    hide:
      name: false
      icon: true
    style: |
      ha-card {
        font-variant: small-caps;
        font-size: 14px !important;
        font-weight: 300 !important;
      }
      :host {
        --tpc-elements-background-color: #5eaaa8 !important;
        --tpc-text-color: white !important;
      }
    link_values: false
type: custom:stack-in-card
mode: vertical
keep:
  background: true
  border_radius: true
  box_shadow: false
  margin: true
  outer_padding: true

The automations:

  1. [Water heater] switch on from button
alias: '[Water heater] switch on from button'
description: ''
trigger:
  - platform: state
    entity_id: input_select.water_heater_state
    to: Heat
condition: []
action:
  - service: switch.turn_on
    target:
      entity_id:
        - switch.water_heater
mode: single

  1. [Water heater] switch off from button
alias: '[Water heater] switch off from button'
description: ''
trigger:
  - platform: state
    entity_id: input_select.water_heater_state
    to: 'Off'
condition: []
action:
  - service: switch.turn_off
    target:
      entity_id: switch.water_heater
mode: single

  1. [Water heater] set mode to schedule from button
alias: '[Water heater] set mode to schedule from button'
description: ''
trigger:
  - platform: time
    at: input_datetime.water_heater_schedule_time
condition:
  - condition: state
    entity_id: input_select.water_heater_state
    state: Schedule
action:
  - service: input_select.select_option
    target:
      entity_id: input_select.water_heater_state
    data:
      option: Heat
mode: single

  1. [Water heater] refresh button when device is on
alias: '[Water heater] refresh button when device is on'
description: ''
trigger:
  - platform: state
    entity_id: switch.water_heater
    from: 'off'
    to: 'on'
condition: []
action:
  - service: input_select.select_option
    target:
      entity_id: input_select.water_heater_state
    data:
      option: Heat
mode: single

  1. [Water heater] heat water for specified time
alias: '[Water heater] heat water for specified time'
description: ''
trigger:
  - platform: state
    entity_id: switch.water_heater
    from: 'off'
    to: 'on'
condition: []
action:
  - delay: '{{ states(''input_number.water_heater_duration'') | multiply(60) | int }}'
  - service: switch.turn_off
    target:
      entity_id: switch.water_heater
mode: single

Helpers:

  1. input_number.water_heater_duration (min:1, max: 60, step: 1)
  2. input_datetime.water_heater_schedule_time
  3. input_boolean.water_heater_scheduled
  4. input_select.water_heater_state (options: Heat, Off, Schedule)
2 Likes

I crafted up this set of buttons using paper-buttons-row. They can increment or decrement the volume of my receiver by 1 or 5 dB, or mute / unmute it.

image

type: entities
entities:
  - entity: input_number.livingroom_amp_volume
    name: Volume
  - type: custom:paper-buttons-row
    buttons:
      - icon: mdi:numeric-5-box-outline
        tooltip: Volume down by 5
        tap_action:
          action: call-service
          service: script.change_volume
          service_data:
            entity_id: input_number.livingroom_amp_volume
            increment: -5
      - icon: mdi:numeric-1-box-outline
        tooltip: Volume down by 1
        tap_action:
          action: call-service
          service: script.change_volume
          service_data:
            entity_id: input_number.livingroom_amp_volume
            increment: -1
      - icon: >-
          {{ iif(is_state_attr('media_player.livingroom_amp', 'is_volume_muted',
          true), 'mdi:volume-high', 'mdi:volume-mute') }}
        tooltip: Mute / Unmute
        tap_action:
          action: call-service
          service: script.toggle_mute
          service_data:
            entity_id: media_player.livingroom_amp
      - icon: mdi:numeric-1-box
        tooltip: Volume up by 1
        tap_action:
          action: call-service
          service: script.change_volume
          service_data:
            entity_id: input_number.livingroom_amp_volume
            increment: 1
      - icon: mdi:numeric-5-box
        tooltip: Volume up by 5
        tap_action:
          action: call-service
          service: script.change_volume
          service_data:
            entity_id: input_number.livingroom_amp_volume
            increment: 5

And the server-side scripts. I had to use scripts because I couldn’t get the template parameters to work properly with the paper-buttons-row card.

script:
  toggle_mute:
    alias: Toggle Mute
    mode: queued
    icon: mdi:volume-mute
    fields:
      entity_id:
        name: Media Player
        description: A media_player entity that can be muted and unmuted
        required: true
        selector:
          entity:
            domain: media_player
    sequence:
      - service: media_player.volume_mute
        target:
          entity_id: "{{ entity_id }}"
        data:
          is_volume_muted: "{{ not is_state_attr(entity_id, 'is_volume_muted', true) }}"

  change_volume:
    alias: Change Volume
    mode: queued
    icon: mdi:volume-high
    fields:
      entity_id:
        name: Volume input_number
        description: An input_number entity that corresponds to the volume of a media_player
        required: true
        selector:
          entity:
            domain: input_number
      increment:
        name: Increment
        description: A integral value by which to adjust the volume
        required: false
        default: 1
        selector:
          number:
            min: -10
            max: 10
            step: 1
            unit_of_measurement: dB
            mode: slider
    sequence:
      - service: input_number.set_value
        target:
          entity_id: "{{ entity_id }}"
        data:
          value: "{{ min(20, max(-80, (states(entity_id) | int) + (increment |int))) }}"

Hi I followed the instruction and saved the numberbox-card.js into config/www folder. But I am getting “Custom element doesn’t exist: numberbox-card” in the card.

- type: entities
        entities:
          - type: custom:numberbox-card
            entity: timer.rodi_water
            icon: mdi:fire
            service: timer.start
            param: duration
            state: duration
            min: 0
            max: 999999
            step: 60
            unit: time

Have you done this?

Manually add numberbox-card.js
to your <config>/www/ folder and add the following to the configuration.yaml file:

lovelace:
  resources:
    - url: /local/numberbox-card.js?v=1
      type: module

Yes I did.

Got the number box running but, got stuck a bit.
I use it to set a light on delay after sunset, but I would love to set the delay and then see in the seecondary info of the button the real time it is set to, but that sensor info I just cannot get to be displayed, so how? Please

This is what I have:

type: custom:numberbox-card
border: true
entity: input_number.auto_light_minutes
secondary_info: >-
  Licht aan: <b style="color:green">
  %sensor.auto_light_start:attributes:timestamp </b>
unit: time

Hi, great work.

Could I use the card to change timer duration without starting the timer with every change?

Here is my code from the examples:

              type: custom:numberbox-card
              card_mod:
                style: |
                  ha-card {
                    background: none;
                    border: none;
                    box-shadow: none;
                  }
              entity: timer.timer_welcomelight_std
              name: false
              icon: false
              border: false
              service: timer.start
              param: duration
              state: duration
              min: 0
              max: 3600
              step: 300
              unit: timehm

Thanks, Steffen

There is no service to change just the duration,
try something like this:

trigger:
  - platform: state
    entity_id: input_number.duration_in_seconds # this will trigger on any change of the input number
action:
  - service: timer.start
    entity_id: timer.your_timer_here
    data:
      duration: "{{ states('input_number.duration_in_seconds') }}" 
  - service: timer.cancel
    entity_id: timer.your_timer_here # if you dont want the timer to start whenever you change the duration.
1 Like

OK thank you, so I have to use a input_number helper for the numberbox-card and use the value if I start the timer from my script.

Hi,

this is my card:

type: custom:numberbox-card
entity: number.riro_kellervorrat_brot
name: Brot
icon: false
unit: ' StĂŒck'
secondary_info: 'Letzter Kauf: %input_datetime.riro_kellervorrat_brot_letzter_kauf:state'
moreinfo: input_datetime.riro_kellervorrat_brot_letzter_kauf
border: true

“input_datetime.riro_kellervorrat_brot_letzter_kauf” is a date in format YYYY-MM-DD. Is it possible to format this in DD-MM-YYYY without using a template sensor?

          - type: custom:numberbox-card
            entity: input_number.keuken_vaatwas_ingevenaantalblokjes
            service: script
            icon: false
            picture: false
            border: false
            name: false
            card_mod:
              style: |
                :host {
                  padding-top: 35px;
                  padding-right: 4px;
                }

can I run a script (service ?)

I want a “counter.keuken_vaatwas_vaatwasblokjes” increase or decrease by 1.

And can I have the same number as the counter in the middle ?

did you get it running? I’m having exactly the same issue (newbie, I guess
!)


Thanks!

Installed the file in config/www (created the folder and pasted the file), and added the lines to configuration.yaml

lovelace:
resources:
- url: /local/numberbox-card.js?v=1
type: module

and getting the “custom element does not exist: numberbox-card”