mattieha / slider-button-card

A button card with integrated slider

Slider button card by @mattieha

A button card with integrated slider for light, switch, fan, cover, input_boolean, media_player, 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.

Show screenshot

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

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

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

• Inspired by Slider entity row

---

slider-button-card's Issues

Request - Lock Slider Button to prevent accidental interactions

Is your feature request related to a problem? Please describe.

When using the "Slider Button Card" together with the "Swipe Nav" it happens quite often that when I want to turn to the next page I accidentally interrupt the light buttons by swiping and turning them on or off.

Describe the solution you'd like
It would be great to integrate the function of locking the button and having to press first and then interact with the slider button.

Example:

button-card #lock

Finally, I would like to thank you for the work you are doing, which I love. And excuse me if the text is not totally well written as I use the translator.

Possible to add support for slider dimmer groups?

my fan can't slide to full speed

My fan has 3 speeds, I can only slide number 1 and 2 (33% and 66%)

Allow the use of groups

Is your feature request related to a problem? Please describe.
First of all congratulate you for this I think it is very useful and I plan to use it a lot the question is that I found something important that I should have for the type of functionality that gives for example the control of lights.

First and foremost in my case is the possibility that there should be able to use groups in my case in the ceiling I have 4 bulbs and do not care much to have to control individually but as a group, I think it is a major flaw that you can not perform this control.

Describe the solution you'd like
Integration of groups within the interface to be able to control several and not just one.

Visual Editor does not work

Checklist:

• [X ] I updated to the latest version available
• [ X] I cleared the cache of my browser

**Release with the issue:1.10

Last working release (if known):

Browser and Operating System: Mobile app, windows 10, chrome, firefox

Description of problem:

The visual editor does not save any of the changed values in the card. Has to be done through the YAML/Code editor.

Question about show_track option.

Just a quick one..

What does Show_Track do?
I don't see any difference when true or false.

show_track | boolean | Optional | Show track when state is on

Slider does not render on Safari (MacOS and iOS including companion app)

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: v1.1.0

Last working release (if known): N/A

Browser and Operating System: Safari / MacOS & iOS

Description of problem: Slider (any type like solid, gradient, striped etc.) does not show at all on Safari on MacOS and iOS (including Home Assistant companion app for iOS). Tested with many different themes. Same config (shown below) renders correctly (slider is visible) on Chrome. Additionally on iOS there is visible bar that is the handle of slider (also visible in visual edit mode on Safari on MacOS).

type: custom:slider-button-card
entity: switch.living_room_neon
name: Neon
slider:
  percentage: false
  direction: left-right
  background: striped
  use_state_color: false
  use_percentage_bg_opacity: false
  show_track: false
  force_square: true
show_name: true
show_state: false
icon:
  show: true
  use_state_color: false
  rotate: false
  tap_action:
    action: more-info
action_button:
  mode: toggle
  show_spinner: true

Javascript errors shown in the web inspector (if applicable):

N/A

Additional information:

Lovelace vertical scrolling with slider button cards

Issue: You cannot scroll scroll vertically on a Lovelace dashboard if you try to start over a slider button card. The card will always interpret the action as a slide and try to set the light brightness instead of scrolling on the page.

This is happening on mobile. Tested on Android with slider-button-card v1.5.1

No support for Firefox

At this moment there is no support for Firefox

Enable slider for climate control to select decimal numbers

Is your feature request related to a problem? Please describe.
I just started using the button slider for my climate device, and noticed that I cant step the values in .5 intervals, only whole integers.

Describe the solution you'd like
Enable sliding/incrementing the values with "0.5" steps.

Describe alternatives you've considered
None

Additional context
Search through documentation, and cant find any slider option that enables this feature.

Slider increase to 100% not working

I have the slider buttons set up to control light group entities. The underlying hardware is Lightwave smart switches.

Sliding up and down works perfectly in every respect. However I find that if I increase the brightness to 100% nothing happens - the lights stay the same brightness as before.

If I give the button a tap (anywhere on the slider), then the 100% gets actioned. Not solved by using any particular slider settings, having been through them all. Only an issue with 100%. Slide up and down to 50% or 95% is works fine.

Add the possibility to put several buttons

Hello,

First of all thank you for this wonderful Frontend!

I noticed that it was not possible to put two / three "action_button". I find that a bit of a shame especially for the cover mode because for the moment we can only put one toggle button and I would have liked to be able to add an up button, a down button and a pause button.

I don't know if it's possible to do it or if it's done on purpose but I find that it adds a little more possibility ; )

thank you for everything

Simon

Feat req - slider behavior

Hello,
I use the slider button card mostly to manually control lights from my mobile phone via the Mobile App using a Grid card or Horizontal card with either 2 or 3 columns. I would like to see the behavior of the slider be as follows:

1. If the light is off, moving the slider leaves the light off but allows you to pre-change the brightness level. Then when you tap the "power" button, the light then turns onto the brightness that you pre-selected.

2. If the light is on, moving the slider changes the brightness immediately. (as it does now)

What happens to me now is that any tap on slider, (intentional or inadvertent) turns on the light immediately. (I admit, I have fat fingers! :-)

Thx!
FJ

Add support for media entities

Select on/off for the tv, and the slide for the volume.
Suggested here

Support for dark themes

I use Home Assistant in darkmode (Google Dark Theme or the Caule dark themes) which works fine normally. But with the Google Dark Theme, the Buttons don't change at all and it looks pretty horrible when I apply one of the Caule dark themes.

I don't know why dark themes aren't working with the card, obviously some css stuff which I unfortunately don't know much about. Would be great to see those themes supported in the future.

A temporary solution is editing the styles with the card-mod integration. This solution has some problems though. First: I had to change multiple variables/classes to make it look at least similar and Second: I had to hardcode color codes because the variables where the wrong color most of the time.

Dashboard with the "Caule Dark Blue" theme applied

Dashboard with the "Google Dark Theme" theme applied

Handle unavailable entities

Unavailable entities are a little confusing at the moment. If you don't have state showing they appear identical to available entities.

I think the best visual indicator would be to have the entire card greyed out? Perhaps an "unavailable" icon option, and/or grey out the icons.

Option to display power consumption

I love this card, awesome job! Replaced all my light controls with this one.

Have one feature request, maybe you could consider implementing.
I have power sensors of all my lights and other appliances.
It would be nice to display the current consumption (Watt) in the slider-button-card.
Introducing two options to control this: power_entity and maybe display_power.

Setting invert: false is causing some inconsistencies (state, opening issues)

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.7.0
Last working release (if known):
N/A
Browser and Operating System:
Windows/Firefox/Chrome, Android/HA Companion App

Description of problem:
When invert: false is set sliding is not working correctly and state is always render as "Closed"

So let's start from good news: when sliding within 1%-99% range everything is working and rendering correctly.

Case 1. Cover is opened (Position: 0)
Issue 1. On the card cover state is misreported as "Closed". Additional information: State icon is rendered correctly ("Open"). Striped pattern is not rendered on the card (I presume this is also correct, cover is in fact open after all)

Case 2. I'm sliding (in my case from top to bottom) to close cover (from position: 0 to position: 100)
Issue 2. Upon sliding down across the button stripped pattern is render correctly, but final state is render as "Open". Once closing animation is over there's no stripped pattern on the button. Additional information: Cover is physically closed, state icon is rendered correctly (as "Closed), state is reported as "Closed".

Case 3. I'm sliding (from bottom to top) to open cover (from position: 100 to position: 0)
Issue 3. Upon sliding up across the button stripped pattern is render correctly, but final state is render as "Closed". After releasing nothing happens (no physical opening of the cover), no opening animation on the card either. The card is in state as described in Case 2.

Case 4. I'm sliding (from top to bottom) on closed cover (Position: 100) (The card is still in state as described in Case 2)
Issue 4. Stripped pattern is rendered as you would expect (closing from top to bottom) but final state is render as "Open" and nothing happens. Button states in this pose, still no physical movement of the cover. Additional information: Sliding to top does not change much except stripped pattern is removed from card, and state is reported back as "Closed". Cover actually stays closed.

To recover Case 4 I need to slide up to 1%. Cover will be opened.

Javascript errors shown in the web inspector (if applicable):

N/A

Additional information:

Allow fire-dom-event for browser_mod pop-card support

Browser mod has changed behavior and requires you to use fire-dom-event.

https://github.com/thomasloven/hass-browser_mod#run-a-command-from-the-frontend

State icons are not respecting customization of device classes AND opposite state colors

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

**Release with the issue:1.5.1

Last working release (if known):

**Browser and Operating System: Version 91.0.4472.114 (Official Build) (64-bit) / W10

**Description of problem: I had to re-classify my Velux shutters as shutters in customize.yaml because they were classified as windows by defaults. Slider-button-card doesn't respect the re-classification and continue to display the window icon and the states of the window icons for open/close status.

The below screenshot shows the difference between default HS entity card with correct state icons and the slider-button-card with incorrect state icons.

It also look like that the state color is the opposite compared to the HA default, or am I miss something here?

Javascript errors shown in the web inspector (if applicable):

Additional information:

Lovelace example, please

Hello!
Can you give me an example of card code with a maximum of options, please.

Background color of card doesn't work with transparent themes

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

The cards have a blue background instead of transparent like other default hass cards. Can background be made same as default cards?
Javascript errors shown in the web inspector (if applicable):

Additional information:

Another Cover (Awning device to be exact) reverse problem.

My Cover is an Awning device class.

I've seen previous reported issue's about this problem, but none about a Awning device class yet.
So therefore another report for this class.
Cover device classes explained

When I set slider to open 20%, the Awning goes to 80% !
Also Icon color, Power button, and Slider state and Percentage are all reversed.
The only thing correct is the Status text Open/Closed.

Hope to see a extra "reverse: true/false" manual option soon.

• [ x] I updated to the latest version available
• [ x] I cleared the cache of my browser

Regards,

The Duke.

Assign to readonly property

Release with the issue: 1.1.0

Browser and Operating System:

Chromium on Raspberry

Error in log: slider-button-card/slider-button-card.js:200:19530 TypeError: Attempted to assign to readonly property.
`
type: horizontal-stack
cards:

• type: custom:slider-button-card
  entity: light.wc_kamer
  slider:
  percentage: true
  direction: left-right
  background: solid
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  force_square: false
  show_name: false
  show_state: true
  icon:
  show: true
  use_state_color: true
  rotate: false
  tap_action:
  action: more-info
  action_button:
  mode: toggle
  icon: mdi:power
  show: true
  show_spinner: true
  tap_action:
  action: toggle
• type: custom:slider-button-card
  entity: light.hanging_lamp
  slider:
  percentage: true
  direction: left-right
  background: solid
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  force_square: false
  show_name: false
  show_state: true
  icon:
  show: true
  use_state_color: true
  rotate: false
  tap_action:
  action: more-info
  action_button:
  mode: toggle
  icon: mdi:power
  show: true
  show_spinner: true
  tap_action:
  action: toggle
  `

State icons colors are the opposite to HA default for open/ close state

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

**Release with the issue: 1.5.1

Last working release (if known):

**Browser and Operating System: Browser and Operating System: Version 91.0.4472.114 (Official Build) (64-bit) / W10

**Description of problem: Following the support of device classes, the state icons works perfectly, many thanks again.
However, please see on the below screenshot that the state color is the opposite to HA default.

I use icon.use_state_color set to true.

Javascript errors shown in the web inspector (if applicable):

Additional information:

Slider to switch always set to 100% instead just switch on.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
all I've tested (current v1.5.3 and some older eg. v1.5.2)

Last working release (if known):
none

Browser and Operating System:

Firefox current 89.0.2 and older 89.0.1, Windows x64, but looks like browser independent (Chrome also tested)

Slider to switch always set lights to 100% instead just switch on.
I'm using some lights stronger then it is needed for normal everyday use (but eg. full power useable when I change my desk in a lab :P), so they are normally switched on with brightess 60% or 72%, but when using "slider to switch" mode, it always sets brighness to 100%.

Action button works properly - it acts as toggle, but "slider to switch" also should work as toggle.

Climate not supported?

Hi,

I just installed the lashes version (1.9.0), clear the browser (Safari) cache and restarted HA.
Unfortunately I can't use any climate entity! See below.

Any idea why?

Add possibility to change light color temperature

Awesome job! Really like this card.

Maybe a feature for the future: the possibility to select the value the slider is affecting. In my case for example: change the color temperature from my ceiling lights. Not sure if it's possible but it would make the card even more useful.

I'm not a professional programmer, but let me know if there is anything I can do.
Thanks again.

Invert percentage (as an option)

Hi,

Thank you for this great UI extension.
However I have covers that are providing reversed percentage for state (100% means cover is (fully) closed, 0% means (fully) open).
So currently all my covers are basically "inverted" on your buttons (-:
Is it possible to add "invert_percentage", "invert_open_close" or similar sounding option in the foreseeable future?

Thank you for your considerations on this one.

Support for input_number

Add support for input_number entities.

Using slider when light off doesn't set brightness

Checklist:

• [* ] I updated to the latest version available
• [* ] I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

When sliding on a light that is off, the brightness should be set but currently it only turns the light on.

Javascript errors shown in the web inspector (if applicable):

Additional information:

Reverse the open/down cursor

Hello,

First of all thank you for this wonderful Frontend!

I noticed that with cover mode, when we take the cursor and pull it down, it opens the shutter. I was wondering if it was possible to add a reverse option. Put the cursor up to raise the shutter and put the cursor down to lower the shutter?

https://i.imgur.com/tTDBfOD.png
https://i.imgur.com/Q4tAlFw.png

I don't know if it's clear but don't hesitate to let me know.

thank you for everything

Simon

I cleared the cache of my browser

Request

Could you show the Lovelace code for the example on the main page of this component (https://github.com/mattieha/slider-button-card)?

Transparancy if slider is off (entity off)

Hi I love die Slider Cards.

Is there any possibility that the Card could be transparent in off state ?

Sorry for the bad english.

add support for climate entities

I'm really liking the style of this component far more than a lot of similar ones.

I'm wondering if you could add support for climate elements with a min and max value. For example I could have my wall-mounted dashboard have a min and max control of 14-21C

Compact mode breaks layout when used with custom action button

Unable to do multiline entity name

Release with the issue:
1.9.0

Last working release (if known):
n/a
Browser and Operating System:
Chrome Version 91.0.4472.114 (Official Build) (arm64)
, OSX 1011.2.2 (20D80)

Description of problem:

The name of my entity is to long and I would like to be able to get it to new line , this is supported on the button-card.

Example of it working in button-card

Light vs. Switch - toggle_on_click

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.40

Last working release (if known):

Browser and Operating System:
Chrome and Windows 10

Description of problem:
Switches work great, as do fans and smart lightbulbs. I do however have a slight problem with simple on/off lights mapped from switches.
As you probably know, in Home Assistant you can define switches which you want to be treated as lights (which is great for all my smart switches controlling actual lights).
With your awesome card, I can easily use something like 'switch.office_lamp' in the card to control the switch and thereby the light, but I would prefer to use 'light.office_lamp' instead.
I tried setting the 'toggle_on_click' flag, and it does work as expected to switch the light on, but not to switch it off. The only way it switches off is using the 'action button'.
All in all, it is a fantastic custom card, and I want to use it for all my buttons, but it also shows some strange and unpredictable behavior which I'm sure you will like to look into. Here are some examples:

1. The light is on - and shown as on by the action button, but shown as off by the card color, icon color, and state caption.
2. Sometimes you need to click twice to get the card to change background color. First click changes the action button state (and switches on the light), then the second click changes the card itself (to show that the light is on).
3. Light is on, card is colored, all looks good. A few minutes later, the card, icon and state all revert to display 'off', while the action button and actual light are 'on'.

Javascript errors shown in the web inspector (if applicable):

Additional information:
If needed, I can try and come up with a more detailed list and some images to help you debug.

State-based icons and entity image

Great job! Convenient, beautiful, versatile. Thank you very much for your work!

It would be great to be able to replace the icon with the entity image and also have the state-based icons, like it realized in default button-card

"None" slider option which acts as toggle?

I would very much appreciate if there was a "none" option for the slider setting, and tapping the card on the "slider" area would simply act as a toggle. As things are, entities with only an on/off state are quite frustrating to use.

This would also allow for switching between toggle and slider states with other cards, without losing out on the look or the need to replicate the look through a different card.

Support for lock entities?

Any chance you could add support for lock entities?

color temp not used as state color for background

Slider Addon version: 1.2.0
Chrome OSX: 91.0.4472.106
Safari: 13.1.2 (13609.3.5.1.5)

Safari is not working at all (there is a issue report)

In chrome the button is working, but when you select a color then the background is used the same color. When you switch to color temperature there is nothing changes.. It still keep the color selected

Support for input_boolean

Add support for input_boolean entities.

Improve mobile touch

With slider.direction set to top-bottom or bottom-top scrolling is also triggered and sliding is difficult / impossible.

Where are the examples?

Where are the yaml examples? When I try to use it like:

  - type: custom:slider-button-card
    entity: light.bedroom_spots
    name: Bedroom
    icon: mdi:desk-lamp
    action_button:
      mode: toggle
      icon: mdi:power

The action button doesnt change from the toggle switch and the icon doesnt change from the default lightbulb??

Cover slider disappearing

Not sure if this is a bug, or intentional. But when I use a cover slider, it shows for a short while until the card just blanks out again. Is it possible to keep the slider state showing?

Intent behind this is easier state views of things like garage doors and blinds.

This may only be happening for binary options, as I do not have any covers that allow for partial closure.

Match theme transparency

Hi,

Really like the card thanks for sharing !!

Is it possible to have the slider appear transparent when the entity is turned off?

Currently on MacBook (safari), iOS app using kibibit theme all cards are transparent apart from this when the entity / light is turned off, when the entity / light is turned on the slider returns to transparent.

Let me know if there's anything I can help test etc..

Larger icon if state hidden

Is your feature request related to a problem? Please describe.
Icon size is a little small for older eyes.

Describe the solution you'd like
Can icon take up full height if state is hidden?

Describe alternatives you've considered
None

Text appering on slider.

Thanks for a beautiful card!
I have found this little bug appearing suddenly.
When moving the slider the text"MOVE" appears. After slideing the text "PRE MOVE 2" appears.
see attached image.

Chrome Version 91.0.4472.77
Mac OS Catalina 10.15.7

Cheers