Slider

Introduction

Sliders let users input a value from a fixed range.

View in Groundhog

Styleguide

Composition

Composition
Label: Fonts, Input field

Shapes

Shapes
x: height: 2px, width: 160px
y: height: 16px, width 16px

Distances

Distances
x: 8px
y: 20px

Colors

Colors
x: turquoise-600
y: gray-300

Slider states

Default

Default

Hover

Hover
x: color: turquoise-700

Disabled

Disabled
x: color: gray-300

Animation

The slider component is not animated at all.

Behavior and corner cases

Slider

The input fields value gets updated according to the slider tumbs position.