Component: Range Slider Interactive value slider powered by noUiSlider

Overview

• Interactive range slider
• Powered by noUiSlider
• Supports single and double range
• Fully customizable
• Lightweight and flexible

Dependency

This component requires noUiSlider.

npm install nouislider

Basic usage

Add a container with data-anim-range.

<div class="range" data-anim-range></div>

Configuration

Default slider configuration:

noUiSlider.create(priceSlider, {
   start: 0,
   connect: [true, false],
   range: {
      min: [0],
      max: [200000],
   },
})

Double range (min / max)

You can create a range with two handles:

noUiSlider.create(priceSlider, {
   start: [1000, 50000],
   connect: true,
   range: {
      min: 0,
      max: 100000,
   },
})

Styling

You can customize the slider appearance using CSS.

.noUi-connect {
   background: #ff3c3c;
}

.noUi-handle {
   border-radius: 50%;
}

Behavior

1. Drag handle to change value
2. Click on track to move handle
3. Smooth animation
4. Supports multiple handles

Download

Use Range Slider for filters, pricing UI, dashboards, and interactive controls.