Version
has been released! Read the upgrade guide

Range slider

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

The Range Slider allows the user to move a 'handle' to select a single value or range.

1Anatomy

  1. Slider. This is the main container of the component.

  2. Handle. Clicking and holding the handle will allow the user to move the range to the value they need. When it is pressed, the current value of the range slider is displayed above the handle.

  3. Icon (optional). This is an optional icon that can be added to the slider to give context.

2States

The Range Slider has two states - default and active. When the user interacts with the slider, the handle extends a transparent border and displays the current slider value above it.

3Variations

There are two variations to the Range Slider - the Single Handle and the Dual Handle. As the name suggests, the Dual handle adds an extra handle to the slider, allowing the user to select both the top and bottom of the range.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright