Form Range
Example range
The Example Range uses type="range" to create a slider input,
allowing users to select a value within a specified range easily.
Disabled
The Disabled Range example uses type="range" with the
disabled attribute to prevent user interaction.
Min and max
The Min and Max Range example uses type="range" with
min and max attributes to set the allowed value range.
Steps
The Range with Steps example uses type="range" with the
step attribute to define value increments.
Default Slider
The Default Slider example demonstrates a basic noUiSlider implementation for smooth and interactive value selection.
Disabled Slider
The Disabled Slider example shows a noUiSlider that is non-interactive, preventing users from changing the value.
Vertical Slider
The Vertical Slider example demonstrates a noUiSlider with a vertical orientation.
You can configure it using orientation: 'vertical'.
Two Handle Slider
The Two Handle Slider example shows a noUiSlider with two handles, allowing users to select a range of values.
You can configure it using start: [min, max].
Margin Slider
The Margin Slider example demonstrates a noUiSlider with a minimum gap between handles.
You can configure it using margin: 30.
Min Val:
Max Val:
Step Slider
The Step Slider example shows how to create a noUiSlider with fixed step increments.
Configure it using step: 10.
RTL Slider
The RTL Slider example demonstrates a right-to-left noUiSlider.
Configure it using direction: 'rtl'.
Max Val:
Tooltips Slider
The Tooltips Slider example shows a noUiSlider with tooltips displaying the current value.
Enable it using tooltips: true.
Multiple Tyle Range Slider
The Multiple Type Range Slider example demonstrates a noUiSlider with multiple range handles.
Configure different ranges using start: [min, max].
Max Val: 20.00
Slider Fit Style
The Slider Fit Style example showcases a noUiSlider with a compact and well-aligned design. Adjust styling using custom CSS for a seamless fit in your layout.
Rounded Slider
The Rounded Slider example shows a noUiSlider with smooth, rounded handles for a modern look.
Square Slider
The Square Slider example displays a noUiSlider with square handles for a sharp and clean design.
Slider Sizes
The Slider Sizes example shows how to adjust the noUiSlider size using classes like .large-slider for a bigger slider.
Soft Limit Slider
The Soft Limit Slider example demonstrates a slider with a soft limit, allowing values to go slightly beyond the set range for flexibility.
Configure it using limit: [min, max] in the settings.
Secoundry Slider
The Secondary Slider example showcases a styled slider using the .noUi-target-secondary class for a distinct appearance.
Success Slider
The Success Slider example showcases a styled slider using the .noUi-target-success class for a distinct appearance.
Info Slider
The Info Slider example showcases a styled slider using the .noUi-target-info class for a distinct appearance.
Warning Slider
The Warning Slider example showcases a styled slider using the .noUi-target-warning class for a distinct appearance.
Danger Slider
The Danger Slider example showcases a styled slider using the .noUi-target-danger class for a distinct appearance.
Dark Slider
The Dark Slider example showcases a styled slider using the .noUi-target-danrk class for a distinct appearance.