Sliders & progress

The template provides a complete set of styles to build sliders and progress share, both available as raw code and through a powerful API:

  • Fluid or fixed size
  • Vertical or horizontal
  • 3 different sizes: thin, normal and large
  • Possibility to have marks inside and on top, at bottom or both
  • Outer marks can be inset or outset
  • Automatic spacing when using external marks
  • Easy configuration through classes and inline options - no script needed
  • Sliders may be bound to input or standalone
  • 70+ options to tweak to look and behavior

Progress horizontal

Raw markup

Thin basic

Complete & fluid 0% 25% 50% 75% 100% Nope Go on Better Almost Yeah! 35% 35%

Large with stripes 65% 65%

Using API

Thin basic

Complete & fluid 35%

Large with stripes 65%

Change value

Progress vertical

Raw markup

0% 25% 50% 75% 100% Nope Go on Better Almost Yeah! 35% 35%

Using API

55 35%

Change value

Sliders

Values

Fixed steps

Sticky steps

Ranges

Vertical sliders