Advanced Range Slider

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

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>

Class Overview

A list of all available utility classes for the advanced range component.

Class NameTypeDescription
DefaultColorPrimary color
advanced-range-secondaryColorSecondary color
advanced-range-infoColorInfo color
advanced-range-successColorSuccess color
advanced-range-warningColorWarning color
advanced-range-dangerColorDanger color
advanced-range-neutralColorNeutral color
advanced-range-smSizeSmall size
defaultSizeMedium size (default)
advanced-range-lgSizeLarge size

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. See the Theming to customize styles globally and apply overrides as needed.

.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.

Previous

File Uploader
Next

Overview