Slider
Search the component library

Slider

v1.0.0-beta.2
Download UI Kit v1.9.0

Allows users to choose a numeric value from a large range of possibilities.

Download UI Kit v1.9.0

Usage Guidelines

Simple confirmation acknowledgements that don’t require additional detail should just use a confirmation button. If an error occurs or additional information is needed to clarify then the appropriate alert style may be dynamically presented.

Features

  • Minimum and maximum values
  • Keyboard accessible

Dependencies

Colors v1.0.1

Basic Behavior

The slider can be dragged left or right to select either a specific quantitative value or to indicate a qualitative location on a spectrum.

When used to input a quantitative value, the slider should always present the exact value selected, either within an input or as a static label. This is not required for qualitative inputs.

Just like with other inputs, labels should generally be used to indicate the purpose of each slider.

The message should appear in the upper corner as part of the normal page load, with no animation.

Sliders used for quantitative and qualitative inputs.

Redlines

Colors
Dimensions
  • Track is 4px high
  • Knob is 20px diameter
Shadow
  • Knob has a 5px blur, 10% opacity rgba(0, 0, 0, 0.1) drop shadow
Focus/Keyboarding
  • Knob is accessible via tabbing
  • Focused knob has 1px basic blue border and a 5px basic blue dropshadow
Behavior
  • The slider should have at least 10 distinct values
  • Once focused, the knob should be controllable by the cursor keys

Changelog

1.0.0-beta.2

  • CHANGED: Switched to using a single color for the track.
  • ADDED: Sketch mockup file.

1.0.0-beta.1

Initial version