Sliders

Components

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.

Default

    Value updated

      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 (–).

      Gradients

      Android

      The Android range slider is derived from a standard Android range slider which does not use any gradients.

      iOS

      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.

      Web

      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,0.1, 0,0,0,.1, 0,0,0,.25 with an inset shadow of: 0,-1,1,.0

      The marker details on the thumb elements are 2 x 8 using border background color and an inset shadow of 0,1,1,.15.

      User Interaction

      Android

      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 12 to 18.

      Web

      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.

      Real world examples

      Android Entire UI The range slider allows users to find their preferred entry fee range.
      iOS Entire UI The range slider allows users to find their preferred entry fee range.
      Web Entire UI The range slider allows users to find their preferred entry fee range.