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

[htmltiger]

Here is the first plugin I have created, it is pretty basic and has room for improvements but it works.

This is for those who would like to make small adjustments using up/down buttons.

GitHub - htmltiger/numberbox-card: Replace input_number sliders with plus and...

[gregorymartin (Greg Martin)]

Your timing is impeccable, I posted this question earlier today!

Alternate Frontend Control for Input Number?

Hi, I have an Input Number helper that I use to control a temperature threshold that is used in a number of automations. I’m not particularly happy with the default slider UI for adjusting its value. Is anyone aware of alternative controls that can be implemented? My ideal would be more of a stepper type control with up/down or plus/minus buttons and the current value, similar to the detail view you get on the Climate entity.

[htmltiger]

I spent hours searching for the similar and could not find a single one so created and learned a lot.
Sharing it so others can use the same

[gregorymartin (Greg Martin)]

It is great nice work! I just tested it out and it is very much what I was looking for. I will spend more time with it and see if I can contribute. One enhancement I would suggest would be to adjust how it displays when added as a row in an entities card. Currently, it shows up with its own border nested in the table. Not sure how complicated that is to handle?

[htmltiger]

Added option to remove borders
border: false

[gregorymartin (Greg Martin)]

Awesome, looks good!

[RetroTim (Tim)]

This is awesome!

This makes it much easier to change input_numbers on a wall-mounted tablet.

Only thing is I had to manually add the repository to HACS. Not a problem, but a lot of people could miss this because of that.

[Sparki]

Sorry guys, I am lost trying to install this. noob

HACS > Frontend > click the + button (bottom)

search for ‘numberbox-card’ = nothing
search for ‘number’ two things that I would expect to come up do appear.

or can I please has a noob manual on how to add manually?

Thanks

[htmltiger]

It should be added in the next update of HACS
for now you can add it manualy from HACS > Frontend > … (three dots on the top) and custom repo
add under Lovelace this url
https://github.com/htmltiger/numberbox-card

[Sparki]

@htmltiger

add it manualy from HACS > Frontend > … (three dots on the top) and custom repo
add under Lovelace this url
https://github.com/htmltiger/numberbox-card

Perfect, Thanks

[chrisgrou]

Great addon. I’m trying to include it in my water boiler/heater ‘card’:

Would you happen to know how I can apply a style to the text (eg. small-caps) with card-mod?
ha-card and :host don’t seem to work and that’s about all the CSS I know

[htmltiger]

type: entities
entities:
  - entity: input_number.living_ac_timer
    type: 'custom:numberbox-card'
    style: |
      .grid-left{font-variant: small-caps}

this only seems to work when under type: entities so the height will increase for a single entry

Edit:

type: entities
entities:
  - entity: input_number.living_ac_timer
    type: 'custom:numberbox-card'
    style: |
      .grid-left{font-variant: small-caps}
style: |
  #states{padding:4px 10px !important}

this should fix the height

[gregorymartin (Greg Martin)]

What card are you using for your scheduled time?

[chrisgrou]

Thank you very much @htmltiger !
I need to play with the padding a little bit, but you’ve really helped.

@gregorymartin it’s the Time Picker Card by @GeorgeSG:
GeorgeSG/lovelace-time-picker-card: Time Picker Card for Home Assistant’s Lovelace UI (github.com)

[terryhonn]

A bit off topic, perhaps, but I’m not a themer or css guru…could you tell me how you’re using the font-variant small-caps globally for your Lovelace font?

Thanks in advance!

[chrisgrou]

I don’t know if it can be done globally, I do it per card or sometimes (case in point), per entity. Most times this is enough:

style: |
  ha-card {
    font-variant: small-caps;
  }

[terryhonn]

Thank you!

[Abscondo]

I can’t seem to figure out why my numberbox-card suddenly won’t render correct on my phone. It’s correct everywhere else, only icons on all numberbox-cards affected. Reset the HA app on my phone as well as reset cache in two browsers used in case a change had just not taken effect through the browsers. Still no change.

Example through Chrome:

Same numberbox-card through companion app on Android:

Icon is there if I open the entity through companion app:

Nothing fancy in the code:

          - entity: input_number.temperatur_stue
            name: Stue Mill når hjemme
            type: 'custom:numberbox-card'
          - entity: input_number.temperatur_stue_borte
            name: Stue Mill andre status
            type: 'custom:numberbox-card'
          - entity: input_number.temperatur_soverom
            name: Soverom radiator når hjemme
            type: 'custom:numberbox-card'
          - entity: input_number.temperatur_soverom_borte
            name: Soverom radiator andre status
            type: 'custom:numberbox-card'

I also attempted to force the original mdi icon adding it through “icon:”, but that didn’t show anything either.

Anyone got ideas? Or similar issues?

[htmltiger]

I have just made some changes in state-badge so please update and see if that helps.
Also make sure you running home assistant version 2021.2.1 or newer as it may fix the issue

[Abscondo]

@htmltiger

2021.2.1

Sorry, I should have found the issue on Github. Impressive response time btw

Issue resolved through.

1. Installed updated card. Reset cache. No change.
2. Updated from 2021.1.5 to 2021.2.2. Reset cache. Solved.