Jump Slider

One occasional hangover from physical sliders is the need to grab the handle in order to move it, with an on-screen slider, we can don’t need to grab it, we can just click/touch the slider at the point we want it to jump to. This is fairly common behaviour for screen based sliders.

Direct access with the error prone single tap

This isn’t without problems however, as it makes us more prone to accidents, particularly with touch-screens. Ideally we can have this direct access, but have some way of indicating that we do want to jump to this disconnected value.

Clearly some gesture other than a single tap/click is required. I experimented with both double tap and long press. I also considered having a secondary button, but didn’t bother implementing as it would require too much extra work and screen real estate.

Direct access with double tap

Direct access with long hold

It turned out to be quite a nice interaction, especially using the long press, which also allows for adjustment before releasing. Providing a dashed ‘ghost’ of the targeted value is useful feedback.

Touch Screen sliders

Touch screen sliders are quite different from normal on screen sliders in that you cover the handle with your fingers. Time to do something about that…

If using a touch device the handle (and ghost handle) extend themselves when active, this isn’t necessary when using a mouse so isn’t activated.

Extending the handles for touchscreens

Killing the ghost

The final interaction was to add a way of cancelling the ghost handle, to do this you simply slide away perpendicularly from the handle. To indicate this is possible the border is now red on the directions that will cancel.

Cancelling the direct access by sliding away

Demo

Press and hold anywhere on the line to bring up the shadow handle.

Source Code