Live Demo

Anatomy

Img
  1. Slider
  2. Background
  3. Progress line
  4. Left control
  5. Right control

Variations

The value of the sliders can be shown in percentage in the bottom, bottom floating and top floating states, with a setting of minimum and maximum value. Sliders can also be used without any value labels in false state

Img

States

Slider can have three possible states — default, active (dragging) or disabled.

Img

Guidelines

  • Where high-precision values are required consider an alternate interface, like a numeric input.
Copyright© Workhall 2023. All Rights Reserved.