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:2

Slider handles

Value:20.00

Value:90.00

Connected Handles

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

Value:20.00

Value:90.00

Connected Handles Variation

Value:20.00

Value:90.00

Slider with tooltip

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

24.00
50.00
0
10
20
30
40
50
60
70
80
90
100

Color Variations

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

24.00
50.00
0
10
20
30
40
50
60
70
80
90
100
24.00
82.00
0
10
20
30
40
50
60
70
80
90
100

Ion Range silders

Start without params

10010

Set min value,max value and start point

100550

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

$200$80002505007501 000

Connecting from and two values

Weight: 145 million pounds — Weight: 155 million pounds

Disable visual details

Disable part of visual details

1 0002 000

Using prefixes

$1 000$10 00002 5005 0007 50010 000

Using postfixes

90°0°-90-4504590

Advanced sliders

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

010 00002 5005 0007 50010 000

Want more? Use grid_num:

010 00002 0004 0008 000

Have predifined step? You can snap grid to it:

010 000010 000

Even if you have a very strange step!

10004.689.36

Lock handle

3070

Limit movement

010030

Advanced limit example

2080020406080100

Disable slider

010030
Copyright © 2018 dedemao. All rights reserved.Hand-crafted & made with