SliderInput Beta React-only

Open in Storybook Open in Figma

SliderInput serves for picking a numeric value inside a range. Since picking exact fractional values would be awkward, it is usually used for integers.

Loading demo…

The legend under the track is optional. The legend can also be used without the middle value.

Rules For Designers

The track is the same as a MEDIUM sized Meter
- 6px high, 3px border radius
- Filled part of the track is $color-blue-300 (#135ee2)
- Unfilled part of the track is $color-gray-400 (#537091) with 10% opacity
The knob is 25px and $color-gray-100 (#eef0f4) with a 2px $color-gray-300 (#a3b5c9) border

Step

SliderInput can be configured to only allow change of the value by a defined step, e.g. by 10.

Loading demo…

In tandem

Sometimes it’s desired to use SliderInput in combination with another input.

Loading demo…

Rules For Accessibility

Make sure that the SliderInput has a proper label even if you don’t want to show it on screen.

TouchSliderInput

Open in Figma

TouchSliderInput is an alternate component for use on touch screens. It should never be used on non-touch devices.

There is a dense variant where the steps are grouped and closer together.

Loading demo…

Rules For Developers

TouchSliderInput needs to be replaced by SliderInput on non-touch devices
The value above the track can be modified by passing a rendering function to the renderValue prop