GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → mattieha → slider-button-card

mattieha / slider-button-card

Licence: MIT license
A button card with integrated slider

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Labels

slidercardhomeassistanthacslovelacelovelace-custom-cardbutton-card

Projects that are alternatives of or similar to slider-button-card

numberbox-card
Replace input_number sliders with plus and minus buttons
Stars: ✭ 61 (-80.88%)
Mutual labels:  slider, hacs, lovelace, lovelace-custom-card
atomic-calendar-revive
An advanced calendar card for Home Assistant Lovelace.
Stars: ✭ 218 (-31.66%)
Mutual labels:  card, homeassistant, hacs, lovelace
bootstrap-grid-card
Bootstrap grid in Lovelace UI
Stars: ✭ 25 (-92.16%)
Mutual labels:  card, homeassistant, lovelace
fullscreen-card
Make your Home Assistant browser fullscreen with one tap.
Stars: ✭ 23 (-92.79%)
Mutual labels:  card, homeassistant, hacs
ha-lovelace-elapsed-time-card
Home Assistant Lovelace Custom Card to calculate time elapsed/left
Stars: ✭ 21 (-93.42%)
Mutual labels:  homeassistant, hacs, lovelace-custom-card
entur-card
Home Assistant Lovelace card card for the Entur public transport component.
Stars: ✭ 38 (-88.09%)
Mutual labels:  homeassistant, hacs, lovelace
charger-card
A lovelace card for electrical vehicle (EV) home chargers and charging robots.
Stars: ✭ 57 (-82.13%)
Mutual labels:  homeassistant, hacs, lovelace
purifier-card
Air Purifier card for Home Assistant Lovelace UI
Stars: ✭ 155 (-51.41%)
Mutual labels:  homeassistant, hacs, lovelace
tesla-style-solar-power-card
Home assistant power card mimicking the one tesla provides for the powerwall app.
Stars: ✭ 103 (-67.71%)
Mutual labels:  card, homeassistant, lovelace
lovelace-collapsable-cards
A custom Lovelace card that hides other cards behind a dropdown toggle
Stars: ✭ 83 (-73.98%)
Mutual labels:  homeassistant, lovelace, lovelace-custom-card
select-list-card
Select List Card displays an input_select entity as a list in lovelace
Stars: ✭ 51 (-84.01%)
Mutual labels:  homeassistant, lovelace, lovelace-custom-card
lovelace-battery-entity-row
Show battery states or attributes with dynamic icon on entity rows in Home Assistant's Lovelace UI
Stars: ✭ 49 (-84.64%)
Mutual labels:  card, hacs, lovelace
uptime-card
Minimalistic uptime card for Home Assistant Lovelace UI
Stars: ✭ 152 (-52.35%)
Mutual labels:  card, hacs, lovelace
MeteoalarmCard
Meteoalarm, Météo-France and DWD severe weather warnings card for Home Assistant Lovelace UI ⛈️
Stars: ✭ 48 (-84.95%)
Mutual labels:  homeassistant, hacs, lovelace
lovelace-valetudo-map-card
Draws the map available from a Xiaomi Vacuum cleaner flashed with Valetudo in a Home Assistant Lovelace card
Stars: ✭ 149 (-53.29%)
Mutual labels:  homeassistant, hacs, lovelace
content-card-linky
cardLinky comptatible with sensor apiEnedis
Stars: ✭ 48 (-84.95%)
Mutual labels:  homeassistant, hacs, lovelace
flex-table-card
Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
Stars: ✭ 122 (-61.76%)
Mutual labels:  homeassistant, lovelace
home assistant adax
Integration for Adax heaters
Stars: ✭ 24 (-92.48%)
Mutual labels:  homeassistant, hacs
linak-desk-card
Home Assistant Lovelace Card for controlling desks based on linak bluetooth controller.
Stars: ✭ 26 (-91.85%)
Mutual labels:  hacs, lovelace
panasonic smart app
Panasonic Smart App integration for Home Assistant.
Stars: ✭ 22 (-93.1%)
Mutual labels:  homeassistant, hacs
View All Similar Projects ➔

Slider button card by @mattieha

GitHub Release hacs_badge

A button card with integrated slider for light, switch, fan, cover, input_boolean, media_player, climate, lock entities.

Preview Preview 2

Please ⭐️ this repo if you find it useful

TOC

Installation

HACS

This card is available in HACS (Home Assistant Community Store). Just search for Slider Button Card in Frontend tab.

Manual

  1. Download slider-button-card.js file from the latest-release.
  2. Put slider-button-card.js file into your config/www folder.
  3. Go to Configuration → Lovelace Dashboards → Resources → Click Plus button → Set Url as /local/slider-button-card.js → Set Resource type as JavaScript Module.
  4. Add custom:slider-button-card to Lovelace UI as any other card (using either editor or YAML configuration).

Configuration

Visual Editor

Slider Button Card supports Lovelace's Visual Editor.

Show screenshot

Visual Editor

Options

Name Type Requirement Description Default
type string Required custom:slider-button-card
entity string Required HA entity ID from domain light, switch, fan, cover, input_boolean, media_player, climate, lock
name string Optional Name entity.friendly_name
show_name boolean Optional Show name true
show_state boolean Optional Show state true
compact boolean Optional Compact mode, display name and state inline with icon. Useful for full width cards. false
icon object Optional Icon options
slider object Optional Slider options
action_button object Optional Action button options

Icon Options

Name Type Requirement Description Default
icon string Optional Icon default entity icon
show boolean Optional Show icon true
use_state_color boolean Optional Use state color true
tap_action object Optional Action to take on tap action: more-info

Slider Options

Name Type Requirement Description Default
direction string Optional Direction left-right, top-bottom, bottom-top left-right
background string Optional Background solid, gradient, triangle, striped, custom gradient
use_state_color boolean Optional Use state color true
use_percentage_bg_opacity boolean Optional Apply opacity to background based on percentage true
show_track boolean Optional Show track when state is on false
force_square boolean Optional Force the button as a square false
toggle_on_click boolean Optional Force the slider to act as a toggle, if true sliding is disabled false
attribute string Optional Control an attribute for light or cover entities
invert boolean Optional Invert calculation of state and percentage, useful for cover entities false
true for cover

Attributes

Light:

  • brightness_pct default
  • brightness
  • color_temp
  • hue
  • saturation

Warning options other than brightness_pct and brightness may give strange results

For example when color_temp is selected as attribute and the current color_mode of the light is not color_temp there is no value available for the slider, so the min value will be displayed. Same for hue and saturation, slider will only show correct value when the color_mode is hs.

Cover:

  • position default
  • tilt

Action button Options

Name Type Requirement Description Default
mode string Optional Mode toggle, custom toggle
show boolean Optional Show the action button true
icon string Optional Icon when mode is custom mdi:power
show_spinner boolean Optional Show spinner when mode is custom true
tap_action object Optional Action to take on tap action: toggle

Action Options

Name Type Requirement Description Default
action string Required Action to perform (more-info, toggle, call-service, navigate url, none) more-info
navigation_path string Optional Path to navigate to (e.g. /lovelace/0/) when action defined as navigate none
url string Optional URL to open on click when action is url. The URL will open in a new tab none
service string Optional Service to call (e.g. media_player.media_play_pause) when action defined as call-service none
service_data object Optional Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service none
haptic string Optional Haptic feedback for the Beta IOS App success, warning, failure, light, medium, heavy, selection none
repeat number Optional How often to repeat the hold_action in milliseconds. non

Styles

Custom styles can be set by using Card mod

    style: |
      :host {
        --VARIABLE: VALUE;
      }
Variable Description Default
--icon-color Color of the icon when icon.use_state_color === false var(--paper-item-icon-color)
--label-color-on Color of the label when state is on var(--primary-text-color, white)
--label-color-off Color of the label when state is off var(--primary-text-color, white)
--state-color-on Color of the state value when state is on var(--label-badge-text-color, white)
--state-color-off Color of the state value when state is off var(--disabled-text-color)
--action-icon-color-on Color of the action button icon when state is on var(--paper-item-icon-color, black)
--action-icon-color-off Color of the action button icon when state is off var(--paper-item-icon-color, black)
--action-spinner-color Color of the spinner action button var(--label-badge-text-color, white)

Examples

Minimal working config

Minimal working config 
type: custom:slider-button-card
entity: light.couch
slider:
  direction: left-right
  background: gradient
icon:
  tap_action:
    action: more-info
action_button:
  mode: toggle

Per feature

General

Compact, best used in full width (not in grid) 
compact: true

Icon

Minimal config 
icon:
  tap_action:
    action: more-info
Icon override 
icon:
  icon: mdi:lightbulb
  tap_action:
    action: more-info

Action button

Minimal config 
action_button:
  mode: toggle
  show: true
Custom 
action_button:
  mode: custom
  show: true
  tap_action:
    action: toggle
Custom icon and tap action 
action_button:
  mode: custom
  show: true
  icon: mdi:palette
  tap_action:
    action: call-service
    service: scene.turn_on
    service_data:
      entity_id: scene.test

Slider

Minimal config 
slider:
  direction: left-right
  background: gradient
Background uses color or color_temp if available 
slider:
  direction: left-right
  background: gradient
  use_state_color: true
Show track, best used in full width or triangle 
slider:
  direction: left-right
  background: triangle
  use_state_color: true
  show_track: true
Force square 
slider:
  direction: left-right
  background: triangle
  use_state_color: true
  show_track: true
  force_square: true

Full examples

Fan

For fan entities the icon auto rotates based on the speed of the fan.

Icon rotate animation 
type: custom:slider-button-card
entity: fan.living_fan
slider:
  direction: left-right
  background: triangle
  show_track: true
icon:
  tap_action:
    action: more-info
action_button:
  tap_action:
    action: toggle
  mode: custom
name: Fan

Switch

Use slider.toggle_on_click: true so the slider acts as a toggle (sliding is disabled).

Toggle on click 
type: custom:slider-button-card
entity: switch.socket
slider:
  direction: left-right
  background: custom
  toggle_on_click: true
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  tap_action:
    action: toggle
  mode: custom
name: Switch

Cover

For most use cases: set slider.direction: top-bottom and slider.background: striped;

Direction top to bottom, custom action icon 
type: custom:slider-button-card
entity: cover.living_cover
slider:
  direction: top-bottom
  background: striped
icon:
  show: true
  tap_action:
    action: more-info
action_button:
  tap_action:
    action: toggle
  mode: custom
  icon: mdi:swap-vertical
name: Cover

Media player

Default behavior: slider is used for volume control, when there is an entity picture it will be used instead of the icon. In this example the action button is used to toggle play/pause.

Action button to toggle play/pause 
type: custom:slider-button-card
entity: media_player.spotify_mha
slider:
  direction: left-right
  background: triangle
  show_track: true
icon:
  tap_action:
    action: more-info
action_button:
  mode: custom
  icon: mdi:play-pause
  tap_action:
    action: call-service
    service: media_player.media_play_pause
    service_data:
      entity_id: media_player.spotify_mha
name: Media

Climate

Default behavior: slider is used to set target temperature, it doesn't alter state.

Target temperature and state disabled in card 
type: custom:slider-button-card
entity: climate.harmony_climate_controller
slider:
  direction: left-right
  background: triangle
  show_track: true
icon:
  tap_action:
    action: more-info
action_button:
  mode: custom
  tap_action:
    action: toggle
name: Airco

Lock

Default behavior: slider.toggle_on_click: true

Action button hidden 
type: custom:slider-button-card
entity: lock.virtual_lock
slider:
  direction: left-right
  background: solid
  toggle_on_click: true
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  show: false
name: Lock

Grid

4 columns, square: false 
type: grid
cards:
  - type: custom:slider-button-card
    entity: light.couch
    slider:
      direction: left-right
      background: gradient
      use_state_color: true
    icon:
      tap_action:
        action: more-info
      use_state_color: true
    action_button:
      mode: toggle
  - type: custom:slider-button-card
    entity: switch.socket
    slider:
      direction: left-right
      background: custom
      toggle_on_click: true
    icon:
      use_state_color: true
      tap_action:
        action: more-info
    action_button:
      tap_action:
        action: toggle
      mode: toggle
    name: Switch
  - type: custom:slider-button-card
    entity: fan.living_fan
    slider:
      direction: left-right
      background: triangle
      show_track: true
    icon:
      tap_action:
        action: more-info
    action_button:
      tap_action:
        action: toggle
      mode: custom
    name: Fan
  - type: custom:slider-button-card
    entity: cover.living_cover
    slider:
      direction: top-bottom
      background: striped
    icon:
      show: true
      tap_action:
        action: more-info
    action_button:
      tap_action:
        action: toggle
      mode: custom
      icon: mdi:swap-vertical
    name: Cover
square: false
columns: 4

Groups

Mixed group entities are not supported, if you want to control multiple

Known issues

When you discover any bugs please open an issue.

Languages

This card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:

  • English
  • French
  • German
  • Hebrew
  • Nederlands (Dutch)
  • Polish (polski)
  • Portuguese
  • Russian
  • Korean
  • Your language?

Credits

beer

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].