Vanilla Breeze

data-range

Cross-browser styled range slider with optional value bubble, prefix/suffix formatting, and tick markers. Covers data-range, data-bubble, and data-markers.

Overview

The data-range attribute enhances a native <input type="range"> with cross-browser styling, an optional value bubble, prefix/suffix formatting, and tick markers. This is a combined page covering data-range, data-bubble, and data-markers.

How It Works

Add data-range to any <input type="range">. The init script:

  1. Wraps the input in a .range-wrapper div for layout control
  2. Normalizes cross-browser track and thumb styling via appearance: none
  3. Sets a --range-pct CSS custom property (0–100%) on every input event
  4. If data-bubble is present, creates an <output> element positioned above the thumb
  5. If data-markers is present, renders tick marks along the track based on the step attribute
  6. If a <datalist> is linked via list, renders labeled tick marks from the option elements

The underlying input remains a real form control. It submits with the form and fires native input and change events.

Attributes

Attribute Type Description
data-range boolean Enables cross-browser range styling and the --range-pct custom property.
data-bubble boolean Shows a floating value bubble above the thumb that updates on input.
data-prefix string Text prepended to the bubble value (e.g., "$").
data-suffix string Text appended to the bubble value (e.g., "%", "°").
data-markers boolean Renders tick marks along the track at each step interval.
data-range-init boolean Set automatically to prevent double-binding. Do not set manually.

Value Bubble

Add data-bubble to display a floating value readout above the thumb. The bubble tracks the thumb position and updates in real time as the user drags.

Prefix and Suffix

Use data-prefix and data-suffix to format the bubble value. The prefix appears before the number and the suffix after it.

Tick Markers

Add data-markers to render tick marks along the track. Ticks are generated at each step interval between min and max.

Datalist Labels

Link a <datalist> via the native list attribute to render labeled tick marks. Each <option> in the datalist becomes a labeled marker on the track.

With Form Field

Wrap in <form-field> for helper text and consistent spacing with other form controls.

CSS Custom Property

The --range-pct custom property is set on the input element and updated on every input event. Its value ranges from 0% to 100%, representing the thumb position relative to the track. Use it for filled-track effects or other dynamic styling.

DOM Structure

After initialization, the following DOM structure is created:

  • .range-wrapper — layout container wrapping the input
  • <output for="inputId"> — the value bubble (only with data-bubble)
  • .range-markers — tick mark container (only with data-markers)
  • .range-labels — label container (only with a linked <datalist>)

Styling

The track and thumb are fully customizable via CSS custom properties. All styles are gated on [data-range-init] so the input renders normally without JavaScript.

Dynamic Elements

Range inputs added to the DOM after page load are automatically enhanced via a MutationObserver. No manual initialization is needed.
↑