lt-rangeslider • Documentation

Installation

Since this is a single-file implementation, you’ve already included everything above. If you prefer to host the script separately, you can extract the <script> block into lt-rangeslider.js and then:

<script src="https://rangeslider.likethat.studio/lt-rangeslider.js"></script>

Usage

Attach the range slider to any container element (div, span, etc.).

<div id="mySliderContainer"></div>

<script>
const container = document.getElementById('mySliderContainer');
attachRangeSlider(container, {
  min: 0,
  max: 500,
  step: 5,
  initialMin: 50,
  initialMax: 300,
  gap: 10,
  onChange: (minValue, maxValue) => {
    console.log('Range values:', minValue, maxValue);
  }
});
</script>

Options

Option	Type	Default	Description
`min`	number	`0`	The minimum allowable value of the slider.
`max`	number	`100`	The maximum allowable value of the slider.
`step`	number	`1`	The increment between selectable values.
`initialMin`	number	`min`	Initial value for the left handle.
`initialMax`	number	`max`	Initial value for the right handle.
`gap`	number	`0`	Minimum gap (in value units) that must separate the two handles.
`onChange`	function	() => {}	Callback invoked whenever the values change, receiving `(minValue, maxValue)`.

API Reference

`attachRangeSlider(container, options)`

Attaches a dual-handle range slider to the specified container. container can be a selector string, an HTMLElement, or a list of elements. options are as documented above.

`RangeSlider` Class

Exposed as window.RangeSlider. You can manually instantiate:

const container = document.getElementById('mySlider');
const slider = new RangeSlider(container, {
  min: 0,
  max: 1000,
  step: 10,
  initialMin: 100,
  initialMax: 900,
  gap: 50,
  onChange: (minV, maxV) => console.log('Values:', minV, maxV)
});

console.log(slider.getValues()); // { min: 100, max: 900 }
slider.setValues(200, 800);

Events

The range slider does not emit DOM events, but you can listen to changes via the onChange callback option:

attachRangeSlider('#slider', {
  onChange: (minValue, maxValue) => {
    console.log('Slider values updated:', minValue, maxValue);
  }
});

Or, if you need to react to programmatic setValues calls, you can manually call onChange after setting:

const sliderInstance = new RangeSlider(container, opts);
sliderInstance.setValues(50, 150);
// If you want immediate callback after programmatic change:
opts.onChange && opts.onChange(50, 150);

Demo