lt-slider

Installation

Include the script before the closing </body> tag, or in your build system:

<script src="https://ui.likethat.studio/slider/lt_slider.js"></script>

Basic Usage

Turn any <input type="range"> into an enhanced slider.

<input type="range" class="tl-slider" value="30" data-min="0" data-max="100" />

<script>
// After loading lt_slider.js
attachSlider('.tl-slider', {
  min: 0,
  max: 100,
  onInput: (value, slider) => {
    console.log('Actual:', value);
  }
});
</script>

Configuration Options

Option	Type	Default	Description
`min`	number	undefined	Minimum actual value.
`max`	number	undefined	Maximum actual value.
`displayMin`	number	undefined	Minimum display thumb position.
`displayMax`	number	undefined	Maximum display thumb position.
`onInput`	function	undefined	Callback: `(actualValue, sliderElement)` fires on every slide.
`label`	string\|false	undefined	Thumb label text; `false` to disable.
`showValue`	boolean	true	Show live display value next to track.
`labelClass`	string	''	Extra CSS class for label.
`valueClass`	string	''	Extra CSS class for value element.
`debug`	boolean	false	Enable debug logs in console.

Live Properties & Methods

Every enhanced slider gains these on its element:

Name	Type	Description
`slider.displayValue`	number	Current thumb position as display range.
`slider.actualValue`	number	Mapped value in `[min, max]` range.
`slider.getCurrentDisplayValue()`	function	Returns `displayValue`.
`slider.getCurrentValue()`	function	Returns `actualValue`.
`slider.setDisplayValue(value)`	function	Programmatically jump to a display position, updates actual.
`slider.setActualValue(value)`	function	Programmatically set actual: reverse-maps to display.

API Reference

`attachSlider(selector, options)`

Initialize all matching range inputs.

selector: CSS selector string.
options: see Configuration Options.

Example with Programmatic Control

<input id="vol" type="range" class="tl-slider" value="25" />
<script>
attachSlider('#vol', { min: 0, max: 1, displayMin: 0, displayMax: 100 });
const slider = document.getElementById('vol');
// Move to display 75:
slider.setDisplayValue(75);
// Log actual:
console.log(slider.actualValue);
</script>

Events

Use the onInput callback—this is the only notification mechanism; no extra DOM events are emitted.

attachSlider('.tl-slider', {
  onInput: (val, el) => console.log('Slider moved to', val)
});

Demo

Brightness Control