Navigation
Victoria Baker
 Santa Ana, CA

Extra- NoUI Sliders

StatisticsInvoicesSchedule
HomeExtraNoUI sliders
Support
Settings
Account securityAnalyticsAccessibility
All settings
NoUI sliders
Basic NoUI slider examples
Slider handles

Set handles using startoption

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 stepoption

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 rangemode

Count mode

Slider pips in countmode

Filtered steps

Slider with filtered pip labels

Values mode

Slider pips in valuesmode

RTL direction

Slider pips in RTLdirection

Positions mode

Slider pips in positionsmode

Advanced examples
More complex NoUI slider examples
Slider with tooltips

Add tooltips with serializationfeature

Value: Value:
Connect to lower side

Connect handle to the lowerside

Value:
Min handles distance

Set minimum distance between handles

Value: Value:
Skipping steps

Skip certain steps with snapoption

Value: Value:
RTL slider direction

Change direction with directionoption

Value:
Connect to upper side

Connect handle to the upperside

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 lowerside

Top to bottom pips

Scale pips from top to bottom

Connect to upper side

Connect handle to the upperside

Bottom to top pips

Scale pips from bottom to top

Slider colors
Contextual NoUI slider alternatives
Default slider

Default dark greyslider color

Success slider style

Using noui-slider-successclass

Primary slider style

Using noui-slider-primaryclass

Warning slider style

Using noui-slider-warningclass

Danger slider style

Using noui-slider-dangerclass

Info slider style

Using noui-slider-infoclass

Other slider options
Optional slider settings
Sizes. Default handle

Using noui-slider-lg (sm)classes

Sizes. Solid handle

Using noui-slider-solidclass

Sizes. White handle

Using noui-slider-whiteclass