According to the documentation for paper-slider it has the following properties:
snaps: false
If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
pin: false
If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
Here’s an example of a 0-100 slider that moves in increments of 5 (and the chosen value is displayed on the pin/thumb).
You can experiment with these properties (and others) on this web-site.
How would I go about adding this functionality to sliders in Lovelace?
I have the impression there’s no way to override the default appearance of all existing sliders and it must be implemented as part of a custom card. Alternately, I can tweak the code of existing custom cards that support sliders. Is this correct?
It would be for controlling the brightness of lights. So instead of the current default, where sliders move in steps of 1 increment, I want them to move using a larger increment.
Basically, I don’t want fine-grained control (increment a light by 1%) but would prefer something coarser (increment in steps of 5 or even 10%). Combined with the pin option it would display the chosen brightness level above the slider’s thumb.
EDIT
The goal is improve usability on a phone.
Currently, a slider is rendered (on a phone) as short line. Setting a light’s brightness is basically an exercise in ‘eyeballing’ (especially if one has wide fingers). For example, setting the brightness to 50% is matter of ‘guesstimating’ the center. The result is likely to be somewhere in the range of 45-55%.
In addition, brightness increments of 1% aren’t very discernible to the human eye whereas many people start noticing a 5% jump. Therefore, to improve usability, I’d like to have the slider move in 5% (or even 10%) increments and to display the value in the slider’s pin.