Sticky slider

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

\text{scale} = \frac{1}{2+\sqrt{2}}\approx0.29289.

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!