{"id":20557541,"url":"https://github.com/junkfix/numberbox-card","last_synced_at":"2025-04-14T13:20:48.560Z","repository":{"id":43730082,"uuid":"304967918","full_name":"junkfix/numberbox-card","owner":"junkfix","description":"Replace input_number sliders with plus and minus buttons","archived":false,"fork":false,"pushed_at":"2024-04-09T16:10:46.000Z","size":251,"stargazers_count":121,"open_issues_count":8,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-28T02:24:18.520Z","etag":null,"topics":["hacs","home-assistant","input","lovelace","lovelace-card","lovelace-cards","lovelace-custom-card","lovelace-ui","number","numberbox-card","slider"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junkfix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-10-17T20:57:14.000Z","updated_at":"2025-03-26T20:18:12.000Z","dependencies_parsed_at":"2023-02-08T13:45:34.656Z","dependency_job_id":"200495c2-5487-468a-8b63-78b0bea11a21","html_url":"https://github.com/junkfix/numberbox-card","commit_stats":null,"previous_names":["junkfix/numberbox-card"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkfix%2Fnumberbox-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkfix%2Fnumberbox-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkfix%2Fnumberbox-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkfix%2Fnumberbox-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junkfix","download_url":"https://codeload.github.com/junkfix/numberbox-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886334,"owners_count":21177645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacs","home-assistant","input","lovelace","lovelace-card","lovelace-cards","lovelace-custom-card","lovelace-ui","number","numberbox-card","slider"],"created_at":"2024-11-16T03:37:36.382Z","updated_at":"2025-04-14T13:20:48.522Z","avatar_url":"https://github.com/junkfix.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/htmltiger"],"categories":[],"sub_categories":[],"readme":"# numberbox-card\n\nNumberBox for input sliders and number entities\n\nInspired from [simple thermostat](https://github.com/nervetattoo/simple-thermostat)\n\n## Installation\n\nManually add numberbox-card.js\nto your `\u003cconfig\u003e/www/` folder and add the following to the `configuration.yaml` file:\n```yaml\nlovelace:\n  resources:\n    - url: /local/numberbox-card.js?v=1\n      type: module\n```\n\n_OR_ install using [HACS](https://hacs.xyz/) and add this (if in YAML mode):\n```yaml\nlovelace:\n  resources:\n    - url: /hacsfiles/numberbox-card/numberbox-card.js\n      type: module\n```\n\nThe above configuration can be managed directly in the Configuration -\u003e Lovelace Dashboards -\u003e Resources panel when not using YAML mode,\nor added by clicking the \"Add to lovelace\" button on the HACS dashboard after installing the plugin.\n\n\n## Configuration\n\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| type | string | **Required** | `custom:numberbox-card`\n| entity | string | **Required** | `input_number.my_slider` or `number.my_number`\n| name | string/bool | `friendly_name` | Override friendly name (set to `false` to hide)\n| picture | string/bool | `entity_picture` | picture as icon eg. `/local/picture.png` local is www folder (picture has priority over icon so set to `false` to hide / display icon instead) \n| icon | string/bool | `icon` | Override icon (set to `false` to hide)\n| border | bool | `false` | set to `true` to show borders\n| icon_plus | string | `mdi:plus` | custom icon\n| icon_minus | string | `mdi:minus` | custom icon\n| initial | number | `?` | initial value when `unknown` or `unavailable` state\n| delay | number | `1000` | delay after pressing in ms, `0` to disable\n| speed | number | `0` | long press speed in ms, `0` to disable\n| refresh | number | `0` | `1` to disable debounce when change, may fix issues with updating\n| secondary_info | string |  | `last_changed` `last_updated` or any text/html,\u003cbr /\u003eyou can also display states or other attributes of any entity for eg. \u003cbr /\u003e `Light is %light.office_1:state` \u003cbr /\u003e`Room temp is %climate.heating:attributes:current_temperature:~1` (:~x digits after decimal) \u003cbr /\u003e`%switch.switch_2:last_updated`\n| unit | string/bool  | `unit_of_measurement` | Override unit string (set to `false` to hide) \u003cbr /\u003e`time` to display the number in hh:mm:ss\u003cbr /\u003e`timehm` to display the number in hh:mm\u003cbr /\u003eto use javascript on state value use brackets to eval for eg. `(value*100)` to change the display value\n\n#### Advanced Config for climate/fan/input_datetime etc\n\n\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| state | string | `undefined` | set it for attribute display\n| min | number | attribute `min` |  \n| max | number | attribute `max`  |  \n| step | number | attribute `step`  |  \n| min_entity | string | | eg `sensor.my_min_size`  |  \n| max_entity | string | | eg `sensor.my_max_size`  |  \n| step_entity | string | | eg `sensor.my_step_size`  |\n| toggle_entity | string | | eg `switch.heating` to display a toggle switch |\n| service | string | `input_number.set_value` |  service name\n| param | string | `value` |  service parameter\n| service_params | object | `{entity_id: entity, [param]: changedvalue}` |  additional service params\n| moreinfo | string | entity | More info entity eg `sensor.my_max_size`, to navigate eg `/lovelace/mytab`,  `false` to disable  |  \n\n```\ntype: entities\nentities:\n  - type: custom:numberbox-card\n    entity: climate.heating\n    icon: mdi:fire\n    state: temperature\n    service: climate.set_temperature\n    param: temperature\n    service_params:\n      entity_id: climate.heating\n      hvac_mode: heat\n    min: 0\n    max: 30\n    step: 0.5\n    speed: 500\n\ntype: entities\nentities:\n  - type: custom:numberbox-card\n    entity: fan.smartfan_fan\n    icon: mdi:fan\n    state: percentage\n    service: fan.set_percentage\n    param: percentage\n    min: 0\n    max: 100\n    step: 20\n\ntype: entities\nentities:\n  - type: custom:numberbox-card\n    entity: input_datetime.timer_time\n    service: input_datetime.set_datetime\n    param: time\n    unit: time\n    step: 60\n\n\n# Timer duration change\ntype: entities\nentities:\n  - type: custom:numberbox-card\n    entity: timer.heating\n    icon: mdi:fire\n    service: timer.start\n    param: duration\n    state: duration\n    min: 0\n    max: 999999\n    step: 60\n    unit: time\n```\n\n![numberbox-card](https://github.com/htmltiger/numberbox-card/raw/main/example3.png)\n```\ntype: entities\nentities:\n  - type: custom:numberbox-card\n    entity: climate.downstairs_heating\n    icon: mdi:fire\n    service: climate.set_temperature\n    param: temperature\n    state: temperature\n    min: 0\n    max: 30\n    step: 0.5\n    toggle_entity: switch.downstairs_heater\n    secondary_info: \u003e\n      Mode:\u003cb style=\"color:red\"\u003e %climate.downstairs_heating:attributes:hvac_action \u003c/b\u003e\u003cbr /\u003e\n      Current temp:\u003cb style=\"color:green\"\u003e %climate.downstairs_heating:attributes:current_temperature \u003c/b\u003e\n      %switch.downstairs_power:last_changed\n```\n\n\n## Examples\n\n![numberbox-card](https://github.com/htmltiger/numberbox-card/raw/main/example.png)\n\nConfigurations:\n```\ntype: entities\ntitle: Example\nshow_header_toggle: false\nentities:\n  - entity: input_number.my_slider\n    secondary_info: last-changed\n  \n  - entity: input_number.my_slider\n    type: 'custom:numberbox-card'\n    icon: 'mdi:timelapse'\n    secondary_info: last-changed\n    unit: S\n\n  - entity: input_number.my_slider\n    type: 'custom:numberbox-card'\n    unit: time\n\n  - entity: input_number.my_slider\n    type: 'custom:numberbox-card'\n    icon_plus: 'mdi:chevron-up'\n    icon_minus: 'mdi:chevron-down'\n    card_mod:\n      style: |\n        .cur-num{font-size:25px !important}\n        .cur-num.upd{color:green}\n        .cur-unit{color:orange; font-size:100% !important; opacity:1 !important}\n        .grid-left{color:red}\n        .grid-right{color:blue}\n        .cur-box ha-icon{transform:scale(2)}\ncard_mod:\n  style: |\n    #states{padding:8px 10px !important}\n```\n![numberbox-card](https://github.com/htmltiger/numberbox-card/raw/main/example2.png)\n```yaml\n- type: custom:numberbox-card\n  entity: input_number.my_slider\n  name: My Title\n  icon: 'mdi:fire'\n  border: true\n  card_mod:\n    style: |\n      ha-card .cur-num {\n         color: green;\n       }  \n```\n\n \n![numberbox-card](https://github.com/htmltiger/numberbox-card/raw/main/example4.png)\n```yaml\ntype: horizontal-stack\ncards:\n  - type: custom:numberbox-card\n    border: true\n    entity: number.office_temp\n    name: false\n    card_mod:\n        style: \u003e\n          .body{display:block!important}\n          .body::after{text-align:center;font-size:10px;content:\"Temperature\";display:block!important}\n  - type: custom:numberbox-card\n    border: true\n    entity: number.office_timer\n    unit: time\n    name: false\n    card_mod:\n        style: \u003e\n          .body{display:block!important}\n          .body::after{text-align:center;font-size:10px;content:\"Minutes\";display:block!important}\n```\n\n\nIt is also possible to add this using `+ Add Card` UI and choose `Custom: Numberbox Card`\n\n---\n\n\u003ca href=\"https://www.buymeacoffee.com/htmltiger\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/white_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunkfix%2Fnumberbox-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunkfix%2Fnumberbox-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunkfix%2Fnumberbox-card/lists"}