RangeElementFactory

EmbeddedRangeSlider A custom-built range slider, single or dual-handle, that replaces the native <input type="range"> for better keyboard and touch UX. Instantiated once per element by RangeElementFactory; the constructor moves the original input off-screen and renders the visible slider in its place.

Generated from source on 2026-08-21. Descriptions come from JSDoc in the file.
Re-run docs_scaffold when the code changes; hand edits are lost on regeneration

Source

• File: Now/js/RangeElementFactory.js (812 lines)
• Form: ES class

Public methods (11)

static createInstance(element, config = {})

Get or create the element's instance state, same as the base ElementFactory.

destroy()

Tear the slider down: disconnect its resize observer and remove its DOM.

getElement()

The wrapper element this slider rendered into.

getValue()

The slider's current value.

setDisabled(disabled)

Enable or disable the slider, including removing its handles from the tab order.

setMax(max)

Change the slider's maximum and update the handles' ARIA attributes to match.

setMin(min)

Change the slider's minimum and update the handles' ARIA attributes to match.

setReadonly(readonly)

Toggle read-only presentation without removing the slider from the tab order.

setStep(step)

Change the slider's step and refresh the display to match.

setValue(value)

Set the slider's value, snapping each number to the nearest step.

static setupElement(instance)

Replace the native range input with an EmbeddedRangeSlider.

Events

These are DOM CustomEvents dispatched on the element, so listen with
element.addEventListener() and read the values from event.detail.

Data attributes used

data-prefix · data-range · data-show-labels · data-show-tooltips · data-suffix

Depends on

ColorElementFactory · ElementFactory · ElementManager · EventManager · FormManager · Utils