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.