SIDEBAR SKINS

HEADER SKINS

Horizontal slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible

Vertical slider

The orientation setting can be used to set the slider to "vertical" or "horizontal"

Values range

noUiSlider will keep your values within the slider range, which saves you a bunch of validation.

Value:

Slider handles

Value:

Value:

Connected Handles

The connect setting can be used to control the bar between the handles, or the edges of the slider

Value:

Value:

Connected Handles Variation

Value:

Value:

Slider with tooltip

noUiSlider can provide a basic tooltip without using its events system. Set the tooltips option to true to enable.

Color Variations

Tooltip slider with different color options, use class slider-* to quickly create a styled slider. Uses native boostrap colors scheme classes

Ion Range silders

Start without params

Set min value, max value and start point

Set type to double and specify range, also showing grid and adding prefix "$"

Connecting from and two values

Disable visual details

Disable part of visual details

Using prefixes

Using postfixes

Advanced sliders

Grid will set up automatically, just set grid to true:

Want more? Use grid_num:

Have predifined step? You can snap grid to it:

Even if you have a very strange step!

Lock handle

Limit movement

Advanced limit example

Disable slider

Copyright © 2017 UrbanUI. All rights reserved. Hand-crafted & made with