Range slider

A slider for picking a value or a range by dragging one or two handles, built on noUiSlider and styled by Tabler.

Overview

A range slider lets users pick a value by dragging a handle instead of typing it. Use it when the exact number matters less than the rough position, for example a price range or a volume level. Tabler styles the noUiSlider plugin to match the rest of the interface.

<div id="range-overview"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.noUiSlider && noUiSlider.create(document.getElementById("range-overview"), {
      start: 20,
      connect: [true, false],
      step: 10,
      range: {
        min: 0,
        max: 100
      }
    });
  });
</script>

Installation

Install noUiSlider with npm:

npm install nouislider

yarn add nouislider

pnpm install nouislider

bun install nouislider

Or include it from a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/nouislider/dist/nouislider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/nouislider/dist/nouislider.min.js"></script>

Tabler restyles the slider in the vendors plugin, so include tabler-vendors.css as well:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css" />

Usage

Single value

Create an empty element and call noUiSlider.create() on it. start sets the initial value, range the bounds, and step how far one move goes.

connect: [true, false] fills the track before the handle, which shows how far along the value is.

<div id="range-single"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.noUiSlider && noUiSlider.create(document.getElementById("range-single"), {
      start: 20,
      connect: [true, false],
      step: 10,
      range: {
        min: 0,
        max: 100
      }
    });
  });
</script>

noUiSlider.create(document.getElementById('range-single'), {
  start: 20,
  connect: [true, false],
  step: 10,
  range: { min: 0, max: 100 },
});

Two handles

Pass two values in start to get a range with a lower and an upper handle. With connect: true the fill sits between them.

<div id="range-two"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.noUiSlider && noUiSlider.create(document.getElementById("range-two"), {
      start: [20, 70],
      connect: true,
      step: 5,
      range: {
        min: 0,
        max: 100
      }
    });
  });
</script>

Reading the value

The slider is not a form field, so it sends nothing on submit. Listen for updates and copy the value into a hidden input, or use it directly.

const slider = document.getElementById('range-single');

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

slider.noUiSlider.on('update', (values, handle) => {
  document.getElementById('price').value = values[handle];
});

See the noUiSlider documentation for the full list of options.

Accessibility

noUiSlider gives each handle role="slider" with the current, minimum and maximum values, so screen readers announce it and the arrow keys work out of the box. What is left to you:

• Add a visible label above the slider and point it at the handle with aria-labelledby, or set handleAttributes when creating the slider to give each handle an aria-label.
• With two handles, name them separately - "Minimum price" and "Maximum price" - otherwise both read out the same.
• Show the selected value as text next to the slider. A handle position alone is hard to read, and impossible to confirm without sight.
• Keep a typed input as an alternative when the exact value matters. Dragging is imprecise for anyone with limited motor control.

Related