Sliders
Sliders are horizontal or vertical tracks where users can pick a value or range between a minimum and a maximum value.
Variations
The textbox can be used in a standard version and with steppers.
The continuous slider is used to pick a value within a limited range.
The step slider jumps between specified increments. The increments should increase linearly.
The span slider is used to select a range between two values.
Specs
How the component are built up and styled.
Anatomy
The continuous slider are built up by a track that shows the total span width, a filled track that shows the current value, and a track that you can drag to select the value. It is also an arrow to click at each side of the slider, to change the value by clicking.
Colors
The search box the normal style.
Typography
The alignment of the text varies based on type and state of the textbox. The text in the stepper textbox is center-aligned.
Measures and spacing
The textbox uses the the same height as buttons to make sure its clickable. The width can be customised to fit its content and space in interface.
States
The look of the states are defined by the style.