Range slider - Design System

Select a range within minimum and maximum values.


The range slider allows a user to select a range of values on a single line.

The range slider can be customised with minimum and maximum values. The user is able to select 2 values within that range.


A visual example of a range slider.

How to build

Range sliders can currently only be added in forms.

If you'd like to add a form to your site, contact your SDP content lead.

Reviewed 13 May 2019

Get support using SDP

Our community of practice for anyone with content on SDP meets once every 2 months. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact

Was this page helpful?