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.

Continous slider

The continuous slider is used to pick a value within a limited range.

Step slider

The step slider jumps between specified increments. The increments should increase linearly.

Span slider

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.

Components
1
Empty track
2
Filled track
3
Thumb
4
Text
5
Move slider button

Colors

The search box the normal style.

Element
Color name
1
Track
style-indent
2
Filled track
style-raised
3
Thumb
style-normal
4
Value text
color-ui-element-active
5
Arrow icons
color-ui-element-neutral

Typography

The alignment of the text varies based on type and state of the textbox. The text in the stepper textbox is center-aligned.

Text category
Text attributes
1
Body
Aa
Typeface: Open Sans
Weight: Regular
Size: 16px
Line height: 24px

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.

Continous slider
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Continous slider
Enabled
Thumb
style-normal-enabled
Hover
Thumb
style-normal-hover
Pressed
Thumb
style-normal-pressed
Track
style-raised-pressed
Focused
Thumb
style-normal-focused
Disabled
Thumb
style-thumb-disabled
Filled track
style-selected-disabled
Icons
color-ui-element-disabled