Skip to content

The slider tool

1.0.0 · Input ·

The slider tool is an input tool with configurable track, active track, thumb and label position and styling.

58 %

The slider can possibly also be configured as state value output in the future...

And used as a very compact sort of "gauge", if you look at the second example with in this case a (for lights) color temperature gradient fill on the track. Adding colorlist or colorstop functionality would be a nice feature too!

Basic usage

→ TODO: find out if there is a simple, basic usage... 

1
2
3
4
5
- type: 'slider'              # tooltype is 'slider'
  position:                   # Position on (100x100) canvas
    cx: 50                    # cx=50 is center position
    cy: 50                    # cy=50 is center position
  entity_index: 1

Advanced usage

Below example is the configuration of the first example above.

From: view-sake2 (1st row, 1st card)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
- type: slider
  position:
    cx: 40
    cy: 81
    capture:
      width: 80
      height: 15
    track:
      width: 70
      height: 2
      radius: 1
    thumb:
      width: 5
      height: 10
      radius: 1
    label:
      # placement can be none, thumb, position (cx,cy)
      placement: position
      cx: 95                  # Place value right from slider
      cy: 81
    orientation: horizontal   # default, other is vertical
  entity_index: 1             # The brightness attribute
  #
  # Extra:
  # Convert brightness value (0..255) to 0..100%
  derived_entity:
    input : '[[[ return state ]]]'
    state: >
      [[[
        if (typeof(entity) === 'undefined') return;
        if (typeof(state) === 'undefined') return;

        var bri = Math.round(state / 2.55);
        return (bri ? bri : '0');
      ]]]
    unit: >
      [[[
        if (typeof(state) === 'undefined') return undefined;
        return '%';
      ]]]
  #
  # The action for the slider if value has changed
  slider_action:
    update_interval: 200      # Update every 200 ms while dragging
    service: light.turn_on
    parameter: brightness_pct
  scale:                      # Min/Max slider value
    min: 1
    max: 100
    step: 1
  styles:
    label:
      text-anchor: end
      font-size: 10em
      font-weight: 600
    # track:
    thumb:
      stroke-width: 0.5em
      stroke: var(--md--primary-fg-color)
      stroke-opacity: 0.8

Update while dragging

The slider can update the setpoint/value while dragging. This means that the brightness of a light is adjusted while dragging.

The interval is specified by the update_interval property:

  • default value is 0, ie NO update while dragging, only on release of the slider
  • any other value (in milliseconds) starts a timer that checks if the slider is changed, and than calls the slider_action config.

Don't specifiy a very small value, as it may overload your Zigbee/Wifi network

A value of 200 (5x / second) or 250 (4x / second) works very well in my setup using Tradfri lights and zzh! stick.

If you combine this with a light transition, brightness changes are nice and smooth!

Display active track

The second example shows an orange gradient for the active track.

The active track must be enabled using: 

1
2
  show:
    active: true

And defined at the position level: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
- type: slider
  position:
    cx: 40
    cy: 81
    capture:
      width: 80
      height: 15
    track:
      width: 70
      height: 2
      radius: 1
    active:
      height: 2
      radius: 1
    thumb:
      width: 5
      height: 10
      radius: 1

Styling

The slider tool has support for the following forms of styling:

Method Support Description
classes Using SAK or User defined class definitions
styles Using inslider SVG and CSS styles

The slider tool is composed of four parts: "track", "active", "thumb" and "label" + "uom" can be used as the selector for styling: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- type: 'slider'
  position:
    cx: 50
    cy: 50
  entity_index: 1
  classes:
    track:                    # Track selector
      <...>
    active:                   # Active track selector
      <...>
    thumb:                    # Thumb selector
      <...>
    label:                    # Label selector
      <...>
    uom:                      # Unit of label selector
      <...>
  styles:
    track:                    # Track selector
      <...>
    active:                   # Active track selector
      <...>
    thumb:                    # Thumb selector
      <...>
    label:                    # Label selector
      <...>
    uom:                      # Unit of label selector
      <...>

Populair properties:

Property Does what? Example

Haptics

See: https://companion.home-assistant.io/docs/integrations/haptics/ for devices that support haptics

The slider supports its own fixed haptic feedback

Action Haptic Description
Click slider light Feedback that slider is clicked
Move slider selection Feedback for every update to HA of the slider value

Animations

The slider tool has support for the following forms of animations:

Method Support Description
colorstops List of state values to set the color
colorlists Using a colorlist definition
animations Operator state based animations with class/style styling

Examples

Some examples with different settings for track and thumb.