NoUI sliders
Basic NoUI slider examplesSlider handles
The number of handles can be set using the
start option. This option accepts an array of
initial handle positions
Non-linear slider
Sliders can be created with ever-increasing increments by specifying the value for the slider at certain intervals
Value:Values range
The range has a min and max value. If the min value is equal to the max value, handles are evenly spread across the slider
Value:Non-linear stepping
For every sub-range in a non-linear slider, stepping can be
set. The step option only applies to the first
sub-range
Stepping and snapping
The amount the slider changes on movement can be set using
the step option. In this example the step is
set to 10
Snapping between steps
When a non-linear slider has been configured, the
snap option can force the slider to jump
between the specified values
Slider Behaviour
Tapping, dragging, snapping etc.Slider behaviour
The range can be set to drag, and handles can move to taps.
All of them can be enable by using
behaviour option
Fixed dragging
In this example the slider keeps the distance between
handles fixed when the 'drag' flag is set to
drag-fixed value
Tap behaviour
Set behaviour option to tap to
allow slider handle to snap to a clicked location with a
smooth transition. Default option.
Snap behaviour
Use snap to allow handle to snap to a clicked
location. It can immediatly be moved, without a
mouseup + mousedown
Drag behaviour
Makes the range draggable. This slider configuration
requires two handles and the connect option
must be set to true
Combined options
Most 'behaviour' flags can be combined. In this
example we combined drag and
tap with '-' divider
Pips and scales
Adding a scale/pips to a sliderSlider with pips
The range mode uses the range to determine
where the pips should be. A pip is generated for every step
Count mode
The count mode can be used to generate a fixed
number of pips. As with positions mode, the
stepped option can be used
Filtered steps
In steps mode, a pip is generated for every
step. The filter option can be used to filter
the generated pips
Values mode
The values mode is similar to
positions, but it accepts values instead of
percentages. The stepped option can be used
RTL direction
Slider pips also support RTL direction. Set
direction option to rtl to enable
right-to-left direction for the slider
Positions mode
Example of positions mode. In positions mode,
pips are generated at percentage-based positions on the
slider
Advanced examples
More complex NoUI slider examplesSlider with tooltips
Sliders support a basic tooltip. The
tooltips option can also accept formatting
options to format the tooltips content
Connect to lower side
The connect option can be used to control the
bar between the handles or the edges of the slider
Min handles distance
When using two handles, the minimum distance between the
handles can be set using the margin option
Skipping steps
When a slider has been configured, the
snap option can be set to true to
force the slider to jump between values
RTL slider direction
By default the sliders are top-to-bottom and left-to-right,
but this can be changed using the
direction option
Connect to upper side
In this example the connect option is set to
upper to connect handle to the upper side of
the slider
Vertical sliders
NoUI vertical slider orientationDefault vertical slider
The orientation setting can be used to set the
slider to 'vertical'. Note that the height
needs to be set
Vertical ranges
The range has a min and max value. If the min value is equal to the max value, handles are evenly spread across the slider
Connect to lower side
The connect option can be used to control the
bar between the handles or the edges of the slider
Top to bottom pips
The range mode uses the range to determine
where the pips should be. A pip is generated for every step
Connect to upper side
In this example the connect option is set to
upper to connect handle to the upper side of
the slider
Bottom to top pips
Slider pips also support RTL direction. Set
direction option to rtl to enable
right-to-left direction for the slider
Slider colors
Contextual NoUI slider alternativesDefault slider
By default all sliders are using primary color.
You can override it by changing
--slider-connect-bg variable
Success slider style
Use optional .noui-slider-success class to
change slider connect background color to
success
Secondary slider style
Use optional .noui-slider-secondary class to
change slider connect background color to
secondary
Warning slider style
Use optional .noui-slider-warning class to
change slider connect background color to
warning
Danger slider style
Use optional .noui-slider-danger class to
change slider connect background color to
danger
Info slider style
Use optional .noui-slider-info class to change
slider connect background color to info
Other slider options
Optional slider settingsSizes. Default handle
Sliders support 2 optional sizes: large and
small. Use
.noui-slider-[lg|sm] classes to change the size
Sizes. Solid handle
To change default handle color to match the connector
background, add .noui-slider-solid class
Sizes. White handle
To remove inner circle from slider handle, add
.noui-slider-white class. You can also change
its color if needed
