Awesome

Slider button card by @mattieha

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

Please ⭐️ this repo if you find it useful

TOC

• Installation
  • HACS
  • Manual
• Configuration
  • Visual Editor
  • Options
    • Icon options
    • Slider options
    • Action button options
    • Tap action
  • Styles
• Examples
  • Minimal working config
  • Per feature
    • General
    • Icon
    • Action button
    • Slider
  • Full examples
    • Fan
    • Switch
    • Cover
    • Media player
    • Climate
    • Lock
    • In a grid
• Group support
• Known issues
• Languages
• Credits

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.

Options

Icon Options

Slider Options

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

Action Options

Styles

Custom styles can be set by using Card mod

    style: |
      :host {
        --VARIABLE: VALUE;
      }

Examples

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: true

Icon

icon:
  tap_action:
    action: more-info

icon:
  icon: mdi:lightbulb
  tap_action:
    action: more-info

Action button

action_button:
  mode: toggle
  show: true

action_button:
  mode: custom
  show: true
  tap_action:
    action: toggle

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

slider:
  direction: left-right
  background: gradient

slider:
  direction: left-right
  background: gradient
  use_state_color: true

slider:
  direction: left-right
  background: triangle
  use_state_color: true
  show_track: true

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.

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).

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;

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.

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.

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

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

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

• lights use Light group
• covers use Cover group
• media players use Media player group

Known issues

When you discover any bugs please open an issue.

Input Number & Number entities

• If the input_number.entity.min value is not cleanly divisible by the input_number.entity.step value, then the slider card is off by an amount. If your input_number has min = 5, max = 25, step = 5 then it will work just fine. But if the step is 2, then it will be off. This also has the side effect of changing the input_number to an "out of bounds" value when modified via this card. Using step = 1 avoids this problem.
• The same limitation applies to number entities.

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
• Korean
• Nederlands (Dutch)
• Polish (polski)
• Portuguese
• Russian
• Slovak
• Your language?

Credits

• Originally inspired by Slider entity row
• Forked from Slider button card by @mattieha