Mod
JavaScript APIs

Range Slider

The JavaScript API for the Range Slider component.

To handle interaction events for Mod's range input component, you have two options depending on the type of range slider you're using:

  1. mod.single_range_slider() if you're trying to attach event listeners for all <input type="range" class="mod-input-slider"> tags on the page.
  2. mod.dual_range_slider() if you're trying to attach event listeners for all <div class="mod-dual-range-slider"> tags on the page.

Method API

// Using mod(-plus).iife.min.js
window.mod.single_range_slider();
window.mod.dual_range_slider();

// Using mod(-plus).esm.min.js
import { single_range_slider, dual_range_slider } from 'path/to/mod(-plus).esm.min.js';
single_range_slider();
dual_range_slider();

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Single Range Slider

Single Range Slider HTML

<input type="range" class="mod-input-slider" min="0" max="100" value="50">

Single Range Slider JavaScript

window.mod.single_range_slider();

Dual Range Slider

Dual Range Slider HTML

<div class="mod-dual-range-slider">
  <div class="mod-dual-range-slider-track"></div>
  <div class="mod-dual-range-slider-range"></div>
  <input type="range" class="mod-input-slider mod-input-slider-min" min="0" max="100" value="30">
  <input type="range" class="mod-input-slider mod-input-slider-max" min="0" max="100" value="70">
</div>

Dual Range Slider JavaScript

window.mod.dual_range_slider();