• Stars
    star
    801
  • Rank 56,621 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🔹 Add sliders to entity cards

slider-entity-row

Add a slider to rows in lovelace entities cards.

Installing

hacs_badge

Install using HACS or see this guide.

Quick Start

Add this to an entities card:

type: entities
entities:
  - light.bed_light
  - type: custom:slider-entity-row
    entity: light.kitchen_lights

slider-entity-row

Usage

entity can be an entity in one of the following domains:

  • light - set brightness
  • media_player - set volume
  • climate - set temperature
  • cover - set position
  • fan - set speed (assumes first setting is off)
  • input_number - set value (only if mode: slider)
  • input_select - select option
  • number - set value

If you want to control more than one entity with the same slider, use light group, cover group or a custom made template entity.

domains

Available options:

Option Values Description default
min number Minimum value of slider
max number Maximum value of slider
step number Step size of slider selection
toggle true/false Show a toggle or mute button if possible false
hide_state true/false true: Do not display the current state
false: Always display current state - even when the card is too narrow for it to be usable
none
hide_when_off true/false true: Hide slider when state is off
false: Always display slider
false
grow true/false Make the slider as wide as possible (which is really just a little bit wider) false
full_row true/false Hide the icon and name and stretch slider to full width false
show_icon true/false Show an icon when full_row is true. This icon is NOT clickable false
attribute (see below) Which attribute the slider should control
colorize true/false Colorize the bar (only for some attributes) false
dir ltr/rtl Use this to override your languages Right-To-Left or Left-To-Right setting language

Most general Entities row options like name, icon and tap_action et.al. are also supported.

options

YAML code for screenshot above
type: entities
title: Options
entities:
  - type: custom:slider-entity-row
    entity: light.bed_light
    name: Default
  - type: custom:slider-entity-row
    entity: light.bed_light
    name: toggle
    toggle: true
  - type: custom:slider-entity-row
    entity: light.bed_light
    name: hide_state
    hide_state: true
  - type: custom:slider-entity-row
    entity: light.ceiling_lights
    name: hide_when_off
    hide_when_off: true
  - type: custom:slider-entity-row
    entity: light.ceiling_lights
    name: hide_when_off + toggle
    hide_when_off: true
    toggle: true
  - type: section
    label: full_row
  - type: custom:slider-entity-row
    entity: light.bed_light
    name: hide_state
    full_row: true

Attribute

Currently, the following attribute settings are supported.

For light domain:

  • brightness_pct - default
  • brightness
  • color_temp
  • color_temp_mired
  • hue
  • saturation
  • red
  • green
  • blue
  • effect
  • white - for RGBW lights only
  • cold_white - for RGBWW lights only
  • warm_white - for RGBWW lights only

For cover domain:

  • position - default
  • tilt

Buy Me A Coffee

More Repositories

1

hass-browser_mod

🔹 A Home Assistant integration to turn your browser into a controllable entity and media player
TypeScript
1,253
star
2

lovelace-auto-entities

🔹Automatically populate the entities-list of lovelace cards
TypeScript
1,190
star
3

lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
TypeScript
1,059
star
4

lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
TypeScript
1,015
star
5

lovelace-fold-entity-row

🔹 A foldable row for entities card, containing other rows
TypeScript
563
star
6

lovelace-state-switch

🔹Dynamically replace lovelace cards depending on occasion
TypeScript
386
star
7

hass-fontawesome

🔹 Use icons from fontawesome in home-assistant
JavaScript
272
star
8

lovelace-card-tools

🔹A collection of tools for other lovelace plugins to use
JavaScript
244
star
9

lovelace-template-entity-row

🔹 Display whatever you want in an entities card row.
TypeScript
213
star
10

hass-config

My Home Assistant configuration
Python
210
star
11

hass-lovelace_gen

🔹 Improve the lovelace yaml parser for Home Assistant
Python
209
star
12

lovelace-more-info-card

🔹 Display the more-info dialog of any entity as a lovelace card
TypeScript
139
star
13

lovelace-hui-element

🔹 Use built-in elements in the wrong place
TypeScript
105
star
14

hass-favicon

🔹 Change the favicon of your Home Assistant instance
Python
101
star
15

lovelace-card-modder

JavaScript
101
star
16

lovelace-flower-card

JavaScript
99
star
17

lovelace-popup-card

JavaScript
94
star
18

hass-plejd

🔹 Plejd BLE integration for Home Assistant
Python
82
star
19

round-slider

JavaScript
81
star
20

lovelace-badge-card

🔹 Place badges anywhere in the lovelace layout
JavaScript
77
star
21

lovelace-toggle-lock-entity-row

JavaScript
62
star
22

lovelace-fullykiosk

Lovelace plugin for using Fully Kiosk Browser features in home-assistant
JavaScript
61
star
23

homeassistant-lovelace-gen

A lovelace configuration file generator for home assistant
Python
57
star
24

lovelace-player

Lets any browser currently viewing your lovelace interface act as an audio receiver with a media_player interface
JavaScript
50
star
25

mittos64

C
42
star
26

lovelace-theme-maker

JavaScript
42
star
27

lovelace-browser-commander

JavaScript
33
star
28

lovelace-useful-markdown-card

JavaScript
30
star
29

lovelace-gap-card

🔹 A lovelace card that does nothing and looks like nothing. Incredibly useful! No, really.
JavaScript
29
star
30

hass-custom-devcontainer

A devcontainer for developing and testing custom Home Assistant stuff
Shell
28
star
31

homeassistant-2020-presentation

18
star
32

lovelace-markdown-mod

JavaScript
16
star
33

lovelace-gui-sandbox

🔹 Lets you play around with the GUI editors even if you're using YAML mode
JavaScript
16
star
34

lovelace-card-loader

JavaScript
13
star
35

lovelace-color-picker

JavaScript
13
star
36

plejd2mqtt

JavaScript
12
star
37

lovelace-column-card

A columnizing card for lovelace ui for home-assistant.
JavaScript
12
star
38

card-tools

A collection of tools to help develop lovelace cards
JavaScript
11
star
39

os5

My attempts at developing an operating system kernel.
C
11
star
40

lovelace-dummy-entity-row

🔹 An entity row with only icon and name
JavaScript
10
star
41

lovelace-q-card

JavaScript
9
star
42

lovelace-long-press

JavaScript
9
star
43

lovelace-time-input-row

JavaScript
9
star
44

dito

A library and some tools for handling disk image files.
C
8
star
45

nextrevo-mod

How I use the E3D Revo system with Prusa Nextruder
7
star
46

mittsnap

rsnapshot-like tool that leverages btrfs snapshots
Shell
5
star
47

dotfiles

MATLAB
5
star
48

lovelace-color-glance-card

A glance card with a colorized background
JavaScript
3
star
49

lovelace-icon-headers

WIP
JavaScript
2
star
50

lovelace-wbah

Lovelace with bluejays and herons
TypeScript
2
star
51

os4

C
1
star
52

new-hass-config

Python
1
star
53

z80Monitor

Assembly
1
star
54

vim-tstatus

My status line for vim
Vim Script
1
star
55

pyplejd

Python
1
star
56

mittos64-old

C
1
star
57

hass-plant_helper

🔹 Home Assistant Helper for monitoring plant health using MiFlora devices
Python
1
star