Components - Sliders
Basic sliders Basic jQuery UI sliders
Basic slider example
Example of basic jQuery UI slider
Values range slider
Use range: true to show ranges
Custom start value
Set start value using value option
Fixed minimum range
Set min value with range: 'min' option
Snap to increments
Increment values with the step option
Fixed maximum range
Set max value with range: 'max' option
Advanced sliders Advanced jQuery UI sliders
Slider with pips
Using .slider("pips") method
Display handle tooltip
Using .slider("float") method
Display months
Custom output: You selected
Display labels with pips
Using rest: 'label' option
Hide rest of the points
Hide pips using rest: false option
Label localization
Display non-roman numbers/letters
Display pips only
Add 'pips' to the first/last points
Display prefix and suffix
Using prefix and suffix options
Display pips and float
Using both pips and float methods
Vertical sliders Vertical slider orientation
Basic vertical sliders
Using orientation: 'vertical' option
Vertical slider with pips
Using .slider("pips") method
Range with fixed minimum
Set min value with range: 'min' option
Vertical slider with labels
Using rest: 'label' option
Range with fixed maximum
Set max value with range: 'max' option
With handle tooltips
Using both float and pips methods
Slider colors jQuery UI contextual slider colors
Default slider
Default dark grey slider color
Success slider style
Using ui-slider-success class
Primary slider style
Using ui-slider-primary class
Warning slider style
Using ui-slider-warning class
Danger slider style
Using ui-slider-danger class
Info slider style
Using ui-slider-info class
Other slider options Options of jQuery UI sliders
Sizes. Default handle
Using ui-slider-lg (sm, xs) classes
Sizes. Solid handle
Using ui-slider-solid class
Sizes. White handle
Using ui-handle-white class
NoUI sliders Basic NoUI slider examples
Slider handles
Set handles using start option
Non-linear slider
Displays non-linear slider example
Values range
Slider values are part of a range
Non-linear stepping
Displays steps in non-linear slider
Stepping and snapping
Set slider steps with step option
Snapping between steps
Force slider to jump between values
Slider Behaviour Tapping, dragging, snapping etc.
Slider behaviour
Add behaviour to the slider
Fixed dragging
Distance between handles is fixed
Tap behaviour
A handle slides to a clicked location
Snap behaviour
A handle snaps to a clicked location
Drag behaviour
Makes the range dragable
Combined options
Behaviour flags can be combined
Advanced examples More complex NoUI slider examples
Slider with tooltips
Add tooltips with serialization feature
Connect to lower side
Connect handle to the lower side
Min handles distance
Set minimum distance between handles
Skipping steps
Skip certain steps with snap option
RTL slider direction
Change direction with direction option
Connect to upper side
Connect handle to the upper side
Vertical sliders NoUI vertical slider orientation
Default vertical slider
Vertical direction slider example
Connect to lower side
Connect handle to the lower side
Connect to upper side
Connect handle to the upper side
Slider colors Contextual NoUI slider alternatives
Default slider
Default dark grey slider color
Success slider style
Using noui-slider-success class
Primary slider style
Using noui-slider-primary class
Warning slider style
Using noui-slider-warning class
Danger slider style
Using noui-slider-danger class
Info slider style
Using noui-slider-info class
Other slider options Additional NoUI slider options
Sizes. Default handle
Using noui-slider-lg (sm, xs) classes
Sizes. Solid handle
Using noui-slider-solid class
Sizes. White handle
Using noui-slider-white class