NumberBox for input sliders and number entities
Inspired from simple thermostat
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: moduleOR install using HACS and add this (if in YAML mode):
lovelace:
resources:
- url: /hacsfiles/numberbox-card/numberbox-card.js
type: moduleThe above configuration can be managed directly in the Configuration -> Lovelace Dashboards -> Resources panel when not using YAML mode, or added by clicking the "Add to lovelace" button on the HACS dashboard after installing the plugin.
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | custom:numberbox-card |
| entity | string | Required | input_number.my_slider or number.my_number |
| name | string/bool | friendly_name |
Override friendly name (set to false to hide) |
| icon | string/bool | icon |
Override icon (set to false to hide) |
| border | bool | false |
set to true to show borders |
| icon_plus | string | mdi:plus |
custom icon |
| icon_minus | string | mdi:minus |
custom icon |
| initial | string | ? |
initial value |
| delay | string | 1000 |
delay after pressing in ms, 0 to disable |
| secondary_info | string | last-changed |
|
| unit | string/bool | unit_of_measurement |
Override unit string (set to false to hide) time to display the number in hh:mm:ss |
| Name | Type | Default | Description |
|---|---|---|---|
| state | string | undefined |
set it for attribute display |
| min | number | attribute min |
|
| max | number | attribute max |
|
| step | number | attribute step |
|
| param | string | value |
service parameter |
| service | string | set_value |
service name |
type: entities
entities:
- type: custom:numberbox-card
entity: climate.heating
icon: mdi:fire
state: temperature
service: set_temperature
param: temperature
min: 0
max: 30
step: 0.5
type: entities
entities:
- type: custom:numberbox-card
entity: fan.smartfan_fan
icon: mdi:fan
state: percentage
service: set_percentage
param: percentage
min: 0
max: 100
step: 20
Configurations:
type: entities
title: Example
show_header_toggle: false
entities:
- entity: input_number.my_slider
secondary_info: last-changed
- entity: input_number.my_slider
type: 'custom:numberbox-card'
icon: 'mdi:timelapse'
secondary_info: last-changed
unit: S
- entity: input_number.my_slider
type: 'custom:numberbox-card'
unit: time
- entity: input_number.my_slider
type: 'custom:numberbox-card'
icon_plus: 'mdi:chevron-up'
icon_minus: 'mdi:chevron-down'
style: |
.cur-num{font-size:25px !important}
.cur-unit{color:orange; font-size:100% !important; opacity:1 !important}
.grid-left{color:red}
.grid-right{color:blue}
style: |
#states{padding:8px 10px !important}
- type: custom:numberbox-card
entity: input_number.my_slider
name: My Title
icon: 'mdi:fire'
border: trueIt is also possible to add this using + Add Card UI and choose Custom: Numberbox Card
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent