Range Sliders
Range sliders allow the user to select a value between a defined minimum and maximum range. They can work well for discovery and education, but because they’re imprecise and difficult to manipulate, are not the best choice when the user is likely to have a specific number that they want to input.
Standard range slider
Default state
Focus state
HTML code snippet
Specs
Default
Track
- Height: 9 px
- Border: 1 px, Gray 40 (#b4b5b6)
- Background: Gray 80 (#75787b)
Handle
- Border: 1 px, Gray 40 (#b4b5b6)
- Background: 45 px x 45 px, Gray 10 (#e7e8e9)
Focus
- Border: 2 px, Pacific (#0072ce)
- Background: Pacific 20 (#d6e8fa) ####
Use cases
Range sliders can work well for discovery and education, where the inputs are a relative quantity and not a specific numeric input. As an example, users can narrow a list of flight options on kayak.com with sliders that show a range of takeoff times. Sliders are an elegant and intuitive way to allow the user to discover which takeoff times will yield the lowest fares.
Because they’re imprecise and difficult to manipulate, range sliders are not a good choice when the user is likely to have a specific number that they want to input. If you choose to implement a slider in this latter case, consider adding steppers or an input box as an alternative means of entering the same data.
Also consider the balance between the length of the slider and the number of data points it covers (the range, as well as how discrete the points are). The more points to choose from, the harder it is for the user to target a specific number.
Accessibility
Make sure that sliders are accessible by keyboard using the arrow keys.