Slider Button Card

The card adapts its behavior based on the entity type:

• Fans: The icon automatically rotates based on the fan speed.
• Switches/Locks: Use slider.toggle_on_click: true to treat the slider as a simple toggle.
• Covers: Typically use slider.direction: top-bottom and slider.background: striped.
• Media Players: The slider controls volume. If the entity has a picture, it is used instead of the icon. Use action_button with mode: custom to implement play/pause.
• Climate: The slider sets the target temperature but does not alter the state directly.

The slider-button-card does not support mixed group entities. To control multiple entities, you must use official Home Assistant group entities:

• Use Light group for lights.
• Use Cover group for covers.
• Use Media player group for media players.

When using the attribute option in the slider configuration, you can control specific entity attributes.

Note for Lights: Using attributes like color_temp, hue, or saturation may result in unexpected behavior (showing minimum values) if the entity's current color_mode does not match the selected attribute.

Supported Attributes

Light:

• brightness_pct (default)
• brightness
• color_temp
• hue
• saturation

Cover:

• position (default)
• tilt

If you are not using HACS, follow these steps to install the card manually:

1. Download the slider-button-card.js file from the latest release.
2. Place the file in your Home Assistant config/www folder.
3. In Home Assistant, navigate to Configuration → Lovelace Dashboards → Resources.
4. Click the Plus (+) button to add a new resource:
   • URL: /local/slider-button-card.js
   • Resource type: JavaScript Module
5. Add custom:slider-button-card to your Lovelace UI using the editor or YAML.

type: custom:slider-button-card
entity: light.living_room

The icon block allows you to customize the icon used in the card and define what happens when it is tapped.

• icon: Overrides the default entity icon (e.g., mdi:lightbulb).
• tap_action: Defines the Home Assistant action (e.g., more-info, toggle, call-service) when the icon is tapped.
• use_state_color: (Boolean) If true, the icon uses the entity's state color.

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

The card allows using CSS variables for colors, which can be resolved from the theme or specific values. If a value starts with var, the card attempts to resolve it from the element's computed style or the document root.

Supported Variable Patterns:

• var(--primary-color)
• var(--slider-color)
• var(--paper-item-icon-color)

The slider block controls the visual style and interaction of the slider component.

• direction: The orientation of the slider (left-right or top-bottom).
• background: The visual style of the slider background (gradient, triangle, striped, solid, or custom).
• use_state_color: (Boolean) Uses the entity's color or color temperature for the background.
• show_track: (Boolean) Displays the slider track.
• force_square: (Boolean) Forces the slider to maintain a square aspect ratio.
• toggle_on_click: (Boolean) When true, clicking the slider acts as a toggle instead of sliding (useful for switches or locks).

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

The action_button object allows you to add a secondary button to the card for specific tasks (e.g., a power toggle).

action_button:
  mode: toggle
  show: true
  icon: mdi:power
  show_spinner: true
  tap_action:
    action: toggle