Last updated: October 2017
Sliders allows a user specify a range between a minimum and maximum value that they choose. As the range slider’s value changes, the portion of the track between the lower-bound value thumb and the higher-bound value thumb is filled with
link exposing a background color of
grey. View color rules.
The use of range sliders and more general value sliders should be kept to a minimum. Whilst they offer useful functionality they do pose some usability issues so should only be used if there is not another better option. If a user can only select one value from a range the steppers component is the preferred component to use.
When a user selects their chosen range the values are updated to reflect the changes. On both Android and iOS platforms the range values are seperated by an en dash (–).
The Android range slider is derived from a standard Android range slider which does not use any gradients.
The iOS range slider is derived from a standard iOS
UISlider object but adapted to allow for multiple thumb controls. All gradients are taken from this platform specific component.
The web range slider track uses an inset shadow
0px 1px 2px 0px rgba(0, 0, 0, .25), rounded corners with a radius appropriate to the platform standard. The filled area represents the selected values and is
link coloured. The thumb elements have a corner radius of
2, filled with
white, and multiple shadows: -
0,0,0,.25 with an inset shadow of:
The marker details on the thumb elements are
2 x 8 using
border background color and an inset shadow of
The Android component is the only range slider that uses a different UI element on user interaction. On click the thumb element increases in size from
To aid accessibility on our products we encourage the use of keyboard navigation. Users are enabled to access the range slider by using the keyboard tab function, they can navigate back one step by using Shift+Tab.
An important element of allowing users to access our products using keyboard only is to provide the same feedback for keyboard and mouse users. The keyboard focus uses a browsers default state, this should not be removed.