Accessible Dual-Handle Range Slider Library – range-slider.js

range-slider.js is a lightweight JavaScript library that allows you to create a customizable, accessible range slider with two handles for selecting min/max values.

Features:

• Vanilla JavaScript: Zero dependencies, pure DOM manipulation with modern JavaScript APIs.
• Accessibility Built-in: Full keyboard navigation with arrow keys, Home, End, and Page Up/Down support, plus proper ARIA attributes for screen readers.
• Auto-initialization: Data attribute API allows zero-JavaScript setup for basic implementations.
• Pointer Events: Uses modern Pointer Events API for unified mouse, touch, and pen input handling.
• Flexible Configuration: Supports step increments, value bounds, label prefixes/suffixes, and custom styling hooks.
• Lightweight DOM: Efficient structure with minimal elements and no virtual DOM overhead.

Use Cases:

• E-commerce Price Filtering: It lets users define a min and max price, solving the need for a simple, intuitive product filtering experience.
• Dashboard and Analytics Tools: Useful for selecting a data range in a chart or a time window in a log viewer.
• Configuration Panels: Ideal for settings where a user needs to define an acceptable range, like setting temperature thresholds or notification limits.
• Booking Systems: Helps users filter for hotel stays or flights within a specific budget range.

How To Use It:

1. Add the range-slider.js and range-slider.css files to your project. Then, link them in your HTML file:

Using defer on the script tag ensures it executes after the document has been parsed.

<link rel=”stylesheet” href=”range-slider.css”>
<script src=”range-slider.js” defer></script>

2. Add the data-range-slider attribute to a container element and configure through data attributes:

• data-range-slider: Required. Enables auto-initialization on the div element.
• data-min: The absolute minimum value the slider can have. Defaults to 0.
• data-max: The absolute maximum value the slider can have. Defaults to 100.
• data-step: The increment/decrement value when moving a handle. Defaults to 1.
• data-min-value: The initial value for the left (minimum) handle. Defaults to 25.
• data-max-value: The initial value for the right (maximum) handle. Defaults to 75.
• data-label-prefix: A string to display before the value in the labels (e.g., “$”).
• data-label-suffix: A string to display after the value in the labels (e.g., “kg”).
• data-on-change: The name of a globally-scoped JavaScript function to call whenever the slider’s values change.

<div data-range-slider 
  data-min="0" 
  data-max="1000" 
  data-step="10"
  data-min-value="100" 
  data-max-value="500" 
  data-label-prefix="$"
  data-on-change="handlePriceChange">
</div>

3. If you’re working within a framework or need more control, you can initialize the slider manually. This approach is better for SPAs where you manage the DOM dynamically.

const slider: createRangeSlider(document.getElementById('sliderContainer'), {
  min: 0,
  max: 100,
  step: 1,
  minValue: initialMin: 25,
  maxValue: initialMax: 75,
  labelPrefix: '',
  labelSuffix: '',
});
slider.sliderElement.addEventListener('rangeChange', (e) => {
  console.log('Values:', e.detail); // {min: 0, max: 100}
});

4. Access auto-initialized values:

const element = document.querySelector('[data-range-slider]');
const currentValues = element._rangeSlider.getValues();
console.log(currentValues); // {min: 100, max: 500}

Alternatives:

• noUiSlider: A powerful, feature-rich, and highly popular range slider library. It offers more options like vertical orientation, tooltips, and complex stepping, but it’s also a larger dependency.
• Native <input type="range">: The built-in HTML element. It’s the most performant option but is limited to a single handle and is notoriously difficult to style consistently across browsers.

FAQs:

Q: How do I integrate this slider into a React or Vue component?
A: The best way is to use the programmatic API. In your component, create a ref for the container div. Then, in a useEffect (React) or onMounted (Vue) hook, call createRangeSlider with the ref.current element and your configuration object. You can manage the state within your component by listening to the rangeChange event.

Q: How can I change the color of the slider’s active range and handles?
A: You can override the default styles in your own CSS file. The component is built with simple, clear class names for this purpose.

Q: How do I prevent handles from overlapping?
A: The component enforces minimum separation automatically. Each handle cannot move closer than one step value to the opposite handle. If you need larger gaps, increase the step value or add validation in your change handler.

Q: Why aren’t my callback functions firing?
A: The data-on-change attribute requires a global function name, not an inline expression. Define your function in global scope or on the window object. For scoped functions, use manual initialization with addEventListener instead.

The post Accessible Dual-Handle Range Slider Library – range-slider.js appeared first on CSS Script.