Advanced Range Slider

A lightweight range slider with advanced features for better user experience.

Class Name Type Description
Default Color Primary color
advanced-range-secondary Color Secondary color
advanced-range-info Color Info color
advanced-range-success Color Success color
advanced-range-warning Color Warning color
advanced-range-danger Color Danger color
advanced-range-neutral Color Neutral color
advanced-range-sm Size Small size
default Size Medium size (default)
advanced-range-lg Size Large size

How to use

1. Install noUiSlider

npm install nouislider

2. Import CSS

Import styles after importing Tailwind and Hummingbird CSS:

@import '@hummingbirdui/hummingbird/src/plugins/nouislider.css';

3. Initialization

Basic initialization example with two handles:

const slider = document.querySelector('[data-nouislider="basic-example"]');

noUiSlider.create(slider, {
  start: [20, 80],
  connect: true,
  range: {
    min: 0,
    max: 100,
  },
});

For more options and configuration guidance, refer to the noUiSlider documentation.

Basic Example

HTML

<div data-nouislider="basic-example"></div>

Single Handle

HTML

<div data-nouislider="single-handle"></div>
const singleHandleSlider = document.querySelector('[data-nouislider="single-handle"]');

noUiSlider.create(singleHandleSlider, {
  start: [20],
  connect: 'lower',
  range: {
    min: 0,
    max: 100,
  },
});

Steps

HTML

<div data-nouislider="steps-slider"></div>
const stepsSlider = document.querySelector('[data-nouislider="steps-slider"]');

noUiSlider.create(stepsSlider, {
  start: [20, 80],
  connect: true,
  range: {
    min: 0,
    max: 100,
  },
  step: 10,
});

With Tooltips

HTML

<div data-nouislider="with-tooltips"></div>
const tooltipSlider = document.querySelector('[data-nouislider="with-tooltips"]');

noUiSlider.create(tooltipSlider, {
  start: [20, 80],
  connect: true,
  range: {
    min: 0,
    max: 100,
  },
  tooltips: true,
});

Vertical Slider

HTML

<div data-nouislider="vertical-slider" class="h-64"></div>
const verticalSlider = document.querySelector('[data-nouislider="vertical-slider"]');

noUiSlider.create(verticalSlider, {
  start: [20, 80],
  connect: true,
  range: {
    min: 0,
    max: 100,
  },
  tooltips: true,
  orientation: 'vertical',
});

Pips

HTML

<div data-nouislider="pips-slider"></div>
const pipsSlider = document.querySelector('[data-nouislider="pips-slider"]');

noUiSlider.create(pipsSlider, {
  start: [100, 500],
  connect: true,
  range: {
    min: 0,
    max: 100,
  },
  tooltips: true,
  pips: {
    mode: 'steps',
    values: [0, 125, 250, 375, 500],
    stepped: true,
    density: 25,
  },
});

Sizes

Adjust the size using classes like .advanced-range-sm and .advanced-range-lg for small and large sliders. Default is medium.

HTML

<div class="advanced-range-sm" data-nouislider="size-variant"></div>
<div data-nouislider="size-variant"></div>
<div class="advanced-range-lg" data-nouislider="size-variant"></div>

Colors

Use .noUi-{color} classes to change the slider color.

HTML

<div data-nouislider="color-slider"></div>
<div class="advanced-range-secondary" data-nouislider="color-slider"></div>
<div class="advanced-range-info" data-nouislider="color-slider"></div>
<div class="advanced-range-success" data-nouislider="color-slider"></div>
<div class="advanced-range-warning" data-nouislider="color-slider"></div>
<div class="advanced-range-danger" data-nouislider="color-slider"></div>
<div class="advanced-range-neutral" data-nouislider="color-slider"></div>

Disabled Slider

Add disabled attribute to disable the slider.

HTML

<div data-nouislider="disabled-slider" disabled></div>

Customization

CSS Variables

The Advanced Range Slider component utilizes several CSS variables for customization. Override these variables in the CSS to modify the appearance of the slider. Here are some of the key CSS variables used:

.noUi-target {
  --ar-color: var(--color-primary);
  --ar-handle-width: --spacing(5);
  --ar-handle-height: --spacing(5);
  --ar-handle-border-radius: calc(infinity * 1px);
  --ar-handle-box-shadow: --alpha(var(--ar-color) / 16%) 0px 0px 0px 8px;
  --ar-handle-active-box-shadow: --alpha(var(--ar-color) / 16%) 0px 0px 0px 14px;
  --ar-track-size: --spacing(1.5);
  --ar-track-border-radius: var(--radius-xl);
  --ar-horizontal-handle-right: --spacing(-2.5);
  --ar-horizontal-handle-top: --spacing(-2);
  --ar-vertical-handle-right: -6.5px;
  --ar-vertical-handle-bottom: --spacing(-2.5);
  --ar-disabled-bg: var(--color-disabled);
  --ar-connect-disabled-bg: var(--color-disabled-color);
  --ar-tooltip-color: var(--color-white);
  --ar-tooltip-bg: var(--color-dark);
  --ar-tooltip-font-size: var(--text-xs);
}

noUiSlider Classes

Customization also can be done via overriding noUiSlider default classes. Follow the noUiSlider styling documentation for more details.