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
