I wonder if anyone has code lying around for a sticky slider - i.e., something like Inputs.range that moves smoothly but sticks temporarily on a few programmer specified values? I’ve got an illustration below that’s almost what I want to achieve. The output stays fixed for a small interval around …

Chrome has native support for datalist on range elements, which gives you that nice snap. Unfortunately other browsers don’t, and a quick test with a polyfill didn’t show success either. Here’s an approach that seems robust and flexible:

This is great @mootari - thanks! I’ve incorporated it into my demo, as shown below. Also of note, the behavior is different in the two embeddings here, thanks to version pinning.

Sticky slider

Community Help

tophtucker April 29, 2022, 5:49am 4

That’s a great subtle example of the usefulness of a sticky slider Mark!

Topic		Replies	Views
Is it just me, or are <input type=range> generally frustrating on mobile devices?	3	2607	May 29, 2018
non numeric range or slider to select dates Community Help	5	1002	September 29, 2021
Slider doesn't seem to work in Chrome? Feedback	3	1169	February 2, 2018
Bug report: can't use slider on my iPhone	1	485	March 29, 2018
How to modify existing inputs. Community Help	5	363	January 4, 2023

Sticky slider

Related topics