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
Pips and scales Adding a scale/pips to a slider
Slider with pips
Slider pips in range mode
Count mode
Slider pips in count mode
Filtered steps
Slider with filtered pip labels
Values mode
Slider pips in values mode
RTL direction
Slider pips in RTL direction
Positions mode
Slider pips in positions mode
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
Vertical ranges
Add ranges to vertical slider
Connect to lower side
Connect handle to the lower side
Top to bottom pips
Scale pips from top to bottom
Connect to upper side
Connect handle to the upper side
Bottom to top pips
Scale pips from bottom to top
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 Optional slider settings
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