Components - Sliders

출처 : http://www.google.com/design/spec/components/sliders.html#

     Continuous slider

Use continuous sliders for subjective settings that do not require a specific value for the user to make meaningful adjustments.

Light

Thumb on: Swatch 500, Opacity  100%
Track on: Swatch 500, Opacity  100%

Thumb off: #000000, Opacity  26%
Track off: #000000, Opacity  26%

Focused and Click Thumb off: #000000, Opacity 38%
Focused and Click Track off: #000000, Opacity 38%

Disabled (disconnected): #000000, Opacity  26%

Light theme

Dark

Thumb on: Swatch 200, Opacity  100%
Track on: Swatch 200, Opacity  100%

Thumb off: #FFFFFF, Opacity  30%
Track off: #FFFFFF, Opacity  30%

Disabled (disconnected): #FFFFFF, Opacity  30%

Dark theme

Various slider behaviors

Spacing for icons to the left and/or right of the bar:

Example of spacing for icons in a slider.

Examples of sliders in normal, hover, focus, click, and disabled states.

With an editable numeric value

Use for settings for which users need to set the exact value. Upon pressing the thumb, the text box becomes editable for text entry and updates the value automatically with thumb movement.

Example of a slider with an editable numeric value

Example of a slider with an editable numeric value in normal, hover, focus, click, and disabled states.

Discrete slider

The discrete slider thumb snaps to evenly spaced tick marks along the slider rail. Use for objective settings that require specific values for the user to make meaningful adjustments. Each tick mark should change the setting to a level that’s discernible to the user. The values are predetermined and aren’t user-editable.

With a numeric value label

Use for settings for which users need to know the exact value of the setting.

Light theme

Dark theme

Animation of discrete slider