Sliders allow users to make selections from a range of values. In mobile applications, the slider is implemented by using touch screen interaction.
The problem
There are two possible implementations 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 the large interval. So, with a 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 available. 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 boundary 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.
In 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 should 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 with 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 provide more information regarding the number of items available in a position. A way of implementing this is by dividing the slider positions by the number of items in a range. With this, a certain distance of movement on the sliders axis represents an equal absolute change in value.
• Another way of presenting the user with more information regarding the 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.