Sliders

jQuery Knob

jQuery Knob

implemented interactions : mouse click and wheel mouse, keyboard (on focus) and fingers (touch events)

Overloaded 'draw' method

Range Slider

Ranger slider

Set diapason from 0 to 5000, Adding postfix "+" to max value, Set slider type to double, Dollar symbol as prefix, Enable grid

Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid

Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix

Change common slider numbers to custom (Month names). Using values array for that. Array can be any length, Slider will change min and max number automaticaly to fit values array length, Step parameter also will be changed to one, to allow to choose items in values array

Bootstrap Slider

Horizontal slider

With bootstrap slider you can variable colors like blue or red by simply changing the data-slider-id="color name"

default slider color

data-slider-id="blue"

data-slider-id="red"

data-slider-id="green"

data-slider-id="yellow"

data-slider-id="aqua"

data-slider-id="purple"


Vertical slider

With bootstrap slider you can variable orientation like vertical and horizontal by simply changing the data-slider-orientation="vertical"

Shape slider

With bootstrap slider you can variable shapes by simply changing the data-slider-handle="shape"

Progress Bars

Default Progress Bar

With bootstrap slider you can variable orientation like vertical and horizontal by simply changing the data-slider-orientation="vertical"

Basic

60% Complete

Contextual alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

45% Complete

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Extra Small Progress Bars

Extra small Progress Bar

With bootstrap slider you can variable orientation like vertical and horizontal by simply changing the data-slider-orientation="vertical"

Basic

60% Complete

Contextual alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

45% Complete

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)