The slider component presented below use noUiSlider, the CSS of which is completely rewritten in SASS, without modifying however anything in JavaScript.

Default slider

Horizontal slider with a single handle.

Primary slider

Horizontal slider with a single handle.

Success slider

Horizontal slider with a single handle.

Info Slider

Horizontal slider with a single handle.

Warning slider

Horizontal slider with a single handle.

Danger slider

Horizontal slider with a single handle.

Circular handle ( )

A single handle with no value selected.

Range slider [ , ]

Horizontal slider with two drag handles.

Fixed maximum [ , 100.00]

The user can only select a minimum.

Fixed dragging [ , ]

Keeps the distance between handles fixed.

Furthermore every part of this component can changed with variables stated in _variables.scss. We have also created a plugin to use this library by writing HTML only.

<div data-slider="primary" data-start="40" data-target="#input-id"></div>

Advanced Examples

Besides the presentation of vertical option, two other examples show the possibility of interaction with toastr.
Fashion model's body
Buy Elephant Now!
  • Theme Settings
  • Header fixed
  • Sidebar fixed
  • Sidebar sticky*
  • Sidebar collapsed
  • Footer fixed
  • Sidebar sticky* - by scrolling up and down the page, the menu placed on the sidebar moves along with the content until the bottom of the menu is reached. Learn more