SliderInput Beta
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.
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
MEDIUMsized 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.
In tandem
Sometimes it’s desired to use SliderInput in combination with another input.
Rules For Accessibility
- Make sure that the SliderInput has a proper label even if you don’t want to show it on screen.