Modern Range Sliders Based On Native Range Inputs – dual-range-input

Native Dual-range Input is a tiny JavaScript (TypeScript) library that creates dual-thumb range sliders using two native HTML range inputs.

It combines browser-native functionality with CSS customization for adaptable slider controls.

How to use it:

1. Install the package with NPM:

# NPM
$ npm install @stanko/dual-range-input

2. Import the module and its CSS into your JavaScript file:

import DualRangeInput from '@stanko/dual-range-input';
import './node_modules/@stanko/dual-range-input/lib/index.css';

3. Create two native range inputs in your web app. This structure forms the basis of your range slider.

<div class="dual-range-input">
  <input type="range" min="0" max="100" step="1" value="15" id="min" />
  <input type="range" min="0" max="100" step="1" value="85" id="max" />
</div>

4. Get references to your range inputs and use these references to initialize the DualRangeInput object.

const $min = document.querySelector('#min');
const $max = document.querySelector('#max');
// precision is optional, defaults to 3
new DualRangeInput($min, $max, 2);

5. You can also attach native event handlers as needed:

$min.addEventListener('input', () => {
  // do something
});

6. Customize your range slider using the following CSS variables:

/* Height of the input */
--dri-height: 1.5rem;
/* Thumb size */
--dri-thumb-width: 1.25rem;
--dri-thumb-height: 1.25rem;
/* Thumb background color */
--dri-thumb-color: #ddd;
--dri-thumb-hover-color: #a8d5ff;
--dri-thumb-active-color: #4eaaff;
/* Thumb border */
--dri-thumb-border-color: rgba(0, 0, 0, 0.1);
--dri-thumb-border-hover-color: var(--dri-thumb-border-color);
--dri-thumb-border-active-color: var(--dri-thumb-border-color);
--dri-thumb-border-radius: 1rem;
--dri-thumb-border-width: 1px;
/* Track size */
--dri-track-height: 0.25rem;
--dri-track-border-radius: 1rem;
/* Track color */
--dri-track-color: #ccc;
--dri-track-filled-color: #0084ff;

7. Here’s an example of a dark theme:

.dual-range-input--dark {
  --dri-thumb-width: 2rem;
  --dri-thumb-height: 2rem;
  --dri-thumb-color: #222;
  --dri-thumb-active-color: #333;
  --dri-thumb-hover-color: #666;
  --dri-track-filled-color: #999;
  --dri-height: 2rem;
}

8. Update the range slider using the update method. It recalculates the midpoint and the gradient fill. The method parameter determines how the midpoint is rounded if it falls between tick marks.

$min.value = 25;
instance.update('ceil');
$max.value = 75;
instance.update('floor')

9. Destroy the instance.

instance.destroy();