Slider

slider component

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 possition.