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
The slider itself, though, remains dynamic.
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.
That’s a great subtle example of the usefulness of a sticky slider Mark!