slider-card

ARCHIVED!!!

This repo is not being updated anymore. Find the updated cards here: https://github.com/AnthonMS/my-cards

This will be rolled back to have the cloud dependant version of the card.

Breaking changes in latest version!

The card is now named "my-slider". So you'll have to change this in your setup after installing the new version. The new version has made it so the card is not cloud dependant any longer. LitElement is compiled directly into the code now.

Description

Slider Card is a customizable card for light, input_number, covers, fans, switches, locks & media_player volume_level entity sliders, for the Home Assistant Lovelace frontend. Please read the notes at the bottom of this readme, there are some important styling tips, because the padding on the thumb works in mysterious ways (Using border styling)
Everything under function in the options table is css styling, so it is possible to use any of the supported ways of setting styles. For example for width, height and paddings you can use '%', 'px', 'rem' and so on. And the same for colors, you can use hex, rgb and named.

Features

• Customizable slider card for lights, input_numbers, media_players, covers, fans, switches, and locks
• It can handle both brightness and warmth of light
• It can handle custom min, max and step for input_number
• It will toggle switches and locks when slid (slide-to-unlock style)

Future features (Maybe)

• Customizable Percentage Text inside slider.
• Multiple entities (Right now you can only put one light entity in each card).
• If you would like a new feature, please feel free to create an issue asking for it.

My Setup Using This

Demo

Options

Installation

HACS

1. Add this repo to HACS
2. Install
3. Add something in the line of this to the configuration:

    - url: /hacsfiles/ha-slider-card/my-slider.js
      type: module

Manually

1. Download my-slider.js located in dist/ directory
2. Place it in your HA www/ directory
3. Add something in the line of this to the configuration:

    - url: /local/my-slider.js
      type: module

Examples

Default

cards:
  - type: custom:my-slider
    entity: light.example

Adjust Warmth of Light

cards:
  - type: custom:my-slider
    entity: light.example
    function: "Warmth"

use for Input Number

cards:
  - type: custom:my-slider
    entity: input_number.example

cards:
  - type: custom:my-slider
    entity: input_number.example
    step: "10"

Change Slider Height and Colors

cards:
    - type: custom:my-slider
      entity: light.dinner_table_light
      height: '30px'
      mainSliderColor: 'green'
      secondarySliderColor: 'red'

Change Thumb Size and Colors

cards:
  - type: custom:my-slider
    entity: light.dinner_table_light
    height: '30px'
    mainSliderColor: 'blue'
    secondarySliderColor: 'darkblue'
    thumbWidth: '25px'
    thumbHeight: '60px'
    thumbColor: 'black'

Change Thumb Padding and Size

cards:
###########  LEFT SLIDER  ############
  - type: custom:my-slider
    entity: light.dinner_table_light
    height: '30px'
    mainSliderColor: 'green'
    secondarySliderColor: 'red'
    thumbWidth: '0px'
    thumbHeight: '30px'
    thumbColor: 'pink'
    thumbHorizontalPadding: '0px'
    thumbVerticalPadding: '0px'

###########  RIGHT SLIDER  ############
  - type: custom:my-slider
    entity: light.sofa_light
    height: '30px'
    mainSliderColor: 'blue'
    secondarySliderColor: 'darkblue'
    thumbWidth: '5px'
    thumbHeight: '30px'
    thumbColor: 'black'
    thumbHorizontalPadding: '0px'
    thumbVerticalPadding: '0px'

Change Active and Inactive Colors Config

cards:
  - type: custom:my-slider
    entity: light.dinner_table_light
    mainColor: red
    mainColorOff: darkred
    secondarySliderColor: blue
    secondarySliderColorOff: darkblue
    thumbColor: white
    thumbColorOff: black

Using a Switch or Lock

By adjusting the maxSet you can adjust when a release causes the entity to be toggled. In this example the user would only need to slide 70% of the way to activate this lock

cards:
  - type: custom:my-slider
    entity: lock.lock
    maxSet: 70

NOTE

When changing the padding of the thumb. If you want for example padding on the sides (horizontal) you will have to triple the width of the thumb itself, this has something to do with the border styling. There is possibly a way around this, if I use some more time on the styling, but for now, this will have to do, since it serves the purpose I need it for. Plus if you just keep this in mind, there should be no trouble. But play around with it. This includes when wanting padding on top/bottom (vertical), you will have to change height of the thumb.

For the colors, you can use HEX colors ('#111111'), color names supported by CSS ('red', 'blue', 'black', etc.) and I assume you can also use rgb ('rgb(255, 255, 255)') and rgba ('rgba(255, 255, 255, 0.5)'). rgba is used when you want to change the opacity, this is the last number in the comma seperated list, where 1 is full opacity and 0 is full transparency.

Setup Dev Environment

1. Clone the repository down on your work PC.
2. Run npm install in the project root directory.
3. Serve it by running npm start
4. Build it by running npm run build
5. Add this to your Home Assistant Configuration (IP is the local IP of the machine you're hosting the card on):

    - url: http://<IP>:5000/my-slider.js?v=001
      type: module