Victoria Baker
Senior developer

Extra - NoUI Sliders

Statistics Invoices Schedule
Home Extra NoUI sliders
Support
Settings
Account security Analytics Accessibility
All settings
NoUI sliders
Basic NoUI slider examples
Slider handles

Set handles using start option

Value: Value:
Non-linear slider

Displays non-linear slider example

Value:
Values range

Slider values are part of a range

Value:
Non-linear stepping

Displays steps in non-linear slider

Value: Value:
Stepping and snapping

Set slider steps with step option

Value:
Snapping between steps

Force slider to jump between values

Value: Value:
Slider Behaviour
Tapping, dragging, snapping etc.
Slider behaviour

Add behaviour to the slider

Value: Value:
Fixed dragging

Distance between handles is fixed

Value: Value:
Tap behaviour

A handle slides to a clicked location

Value:
Snap behaviour

A handle snaps to a clicked location

Value:
Drag behaviour

Makes the range dragable

Value: Value:
Combined options

Behaviour flags can be combined

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

Value: Value:
Connect to lower side

Connect handle to the lower side

Value:
Min handles distance

Set minimum distance between handles

Value: Value:
Skipping steps

Skip certain steps with snap option

Value: Value:
RTL slider direction

Change direction with direction option

Value:
Connect to upper side

Connect handle to the upper side

Value:
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) classes

Sizes. Solid handle

Using noui-slider-solid class

Sizes. White handle

Using noui-slider-white class