AG-8: Sliders

Sliders are intuitive in terms of touch interaction, because they mimic the interaction obtained in the real world. Thus, the common slider implementation is usable both on mobile with touch screen and desktop with the precision of the mouse.

The problem

There are two possible implementation of sliders: the continuous and the discrete slider, and they have their pros and cons.

The continuous implementation of a slider gives the user more control over the selection range, however,  it’s difficult to select a specific value in large interval. So, with continuous slider, the precision may not be satisfactory.

Also, another issue that rises with continuous sliders is that the user has no idea of sizes and values that are currently avaliable. This can lead to unwanted results.


Another variation, is the slider with two selections. In this implementation, the user may select using the same interval a lower and higher bondary for the filter, and the problem with this implementation is that in some cases, when the range of values is too big, the user has trouble selecting a small interval, as the slider selection icons can be overlaid or cannot be possible to perform such action.

The GIF below, we can see another problem using the slider, when the user can’t reach the number 4000.

The recommendation

• The values of the slider selection shoud appear above the pegs, with this, when the user clicks to select, the user’s fingers will not cover the value.

• There should be an alternative form of selection that is different from sliding a peg. This can be done by adding an input element on top of the slider, where the value can be manually changed by typing a new value or the value can be automatically changed when moving the selection along the slider’s range. This option is useful for many disabled users with motor impairments and for those who use screen readers.

• In order to give the user more control over the selection, the slider could probide more information regarding the number of itens avaliable in a position. A way of implementing this, is by dividing the slider positions by number of items in a range, With this, a certain distance of movement on the sliders axis represents and equal aboslute change in value.

• Another way of presenting the user with more information regarding quantity of results, is to present a histogram based on the number of items in stock attached to the slider.

This is how your slider should look like in practice.

Leave a Reply

Your email address will not be published. Required fields are marked *