Slider

Progressive enhancement of one or two native <input type="range"> elements via wf-slider.js . Draws a custom track, fill highlight, optional tick marks, step labels, and per-thumb tooltips. Supports single-value and dual-thumb range modes. The native inputs stay in the DOM so form submission works with zero changes.

Quick Start

Wrap a single <input type="range"> in a div.wf-slider with data-wf-slider . All elements matching that attribute are enhanced automatically on DOMContentLoaded . The min , max , step , and value attributes on the native input are fully respected.

import './wf-slider.js'

<!-- Auto-init -->
<div class="wf-slider" data-wf-slider>
  <input type="range" min="0" max="100" value="40">
</div>

<!-- Manual init -->
<div class="wf-slider" id="my-slider">
  <input type="range" min="0" max="100" value="40">
</div>
<script type="module">
  import { WojoSlider } from './wf-slider.js'
  const sl = new WojoSlider(document.getElementById('my-slider')).init()
</script>

<!-- Inside a wf-field -->
<div class="wf-field">
  <label>Volume</label>
  <div class="wf-slider" data-wf-slider data-wf-unit="%">
    <input type="range" min="0" max="100" value="60" name="volume">
  </div>
</div>

Range Mode

Add data-wf-range and include two <input type="range"> elements. The first controls the lower bound, the second the upper bound. The component prevents the thumbs from crossing – the lower thumb can never exceed the upper and vice versa.

<div class="wf-slider" data-wf-slider data-wf-range>
  <input type="range" min="0" max="1000" value="200" name="price_min">
  <input type="range" min="0" max="1000" value="750" name="price_max">
</div>

Ticks & Labels

Add data-wf-ticks to render tick marks at each step position. Labels are automatically shown alongside ticks; suppress them with data-wf-labels="false" . Use data-wf-labels alone (without data-wf-ticks ) to show only text labels. Ticks and labels require a positive step attribute on the input and at most 100 steps.

<!-- Ticks + labels (labels are auto-enabled with data-wf-ticks) -->
<div class="wf-slider" data-wf-slider data-wf-ticks data-wf-unit="°C">
  <input type="range" min="0" max="50" step="10" value="20">
</div>

<!-- Ticks only - suppress labels -->
<div class="wf-slider" data-wf-slider data-wf-ticks data-wf-labels="false">
  <input type="range" min="0" max="100" step="25" value="50">
</div>

<!-- Labels only - no ticks -->
<div class="wf-slider" data-wf-slider data-wf-labels>
  <input type="range" min="0" max="4" step="1" value="2">
</div>

Tooltip

Add data-wf-tooltip to show a floating bubble above the active thumb while dragging or on keyboard focus. The tooltip displays the current value including any unit suffix set via data-wf-unit . In range mode each thumb gets its own tooltip.

<!-- Single with tooltip -->
<div class="wf-slider" data-wf-slider data-wf-tooltip data-wf-unit="%">
  <input type="range" min="0" max="100" value="65">
</div>

<!-- Range with per-thumb tooltips -->
<div class="wf-slider" data-wf-slider data-wf-range data-wf-tooltip data-wf-unit="px">
  <input type="range" min="0" max="500" value="100">
  <input type="range" min="0" max="500" value="380">
</div>

Unit Suffix

Set data-wf-unit to append a string after every value readout – tooltips, tick labels, and any external display element bound to wf:slider-change . Any string is accepted: %, px, °C, km/h, etc.

<div class="wf-slider" data-wf-slider data-wf-tooltip data-wf-unit="%">
  <input type="range" min="0" max="100" value="65">
</div>

<div class="wf-slider" data-wf-slider data-wf-ticks data-wf-unit="km/h">
  <input type="range" min="0" max="120" step="30" value="90">
</div>

<div class="wf-slider" data-wf-slider data-wf-tooltip data-wf-unit="°C">
  <input type="range" min="-20" max="40" value="18">
</div>

Sizes

Set data-wf-size to sm or lg for smaller or larger track and thumb. The default is medium. A disabled slider applies data-wf-disabled to the wrapper – either in the HTML or through the native disabled attribute on the input.

<div class="wf-slider" data-wf-slider data-wf-size="sm">
  <input type="range" min="0" max="100" value="35">
</div>

<div class="wf-slider" data-wf-slider>
  <input type="range" min="0" max="100" value="60">
</div>

<div class="wf-slider" data-wf-slider data-wf-size="lg">
  <input type="range" min="0" max="100" value="75">
</div>

<!-- Disabled -->
<div class="wf-slider" data-wf-slider data-wf-disabled>
  <input type="range" min="0" max="100" value="50">
</div>

Data Attributes

All attributes go on the div.wf-slider wrapper. Native min , max , step , value , and name go on the <input type="range"> as usual..

CSS Custom Properties

Override on the .wf-slider element or any ancestor.

Events & API

Events are dispatched on the .wf-slider wrapper element. The instance is stored on el._wfSlider .

Events

Methods

const wrapper = document.querySelector('#my-slider')

wrapper.addEventListener('wf:slider-change', (e) => {
  console.log(e.detail.value)  // number or [low, high]
})

// Programmatic control
const sl = wrapper._wfSlider
sl.setValue(75)               // single mode
sl.setRange(200, 800)         // range mode
console.log(sl.getValue())    // 75 or [200, 800]

sl.setDisabled(true)
sl.setDisabled(false)
sl.destroy()