What causes "noUiSlider: 'range' is not an object." in Dogfalo/materialize?

Use the object form: range: { min: 0, max: 100 }.

Dogfalo/materialize · error · Error

noUiSlider: 'range' is not an object.

Error message

noUiSlider: 'range' is not an object.

What it means

Thrown by testRange when 'range' is not a plain object: typeof entry !== 'object' OR Array.isArray(entry). noUiSlider needs the shape { min, max } (optionally with intermediate 'NN%' stops); a tuple, string, number, or null does not carry the required endpoint semantics.

Source

Thrown at extras/noUiSlider/nouislider.js:478

        return value !== undefined && value.toFixed(2);
    }, 'from': Number };

    function testStep ( parsed, entry ) {

        if ( !isNumeric( entry ) ) {
            throw new Error("noUiSlider: 'step' is not numeric.");
        }

        // The step option can still be used to set stepping
        // for linear sliders. Overwritten if set in 'range'.
        parsed.singleStep = entry;
    }

    function testRange ( parsed, entry ) {

        // Filter incorrect input.
        if ( typeof entry !== 'object' || Array.isArray(entry) ) {
            throw new Error("noUiSlider: 'range' is not an object.");
        }

        // Catch missing start or end.
        if ( entry.min === undefined || entry.max === undefined ) {
            throw new Error("noUiSlider: Missing 'min' or 'max' in 'range'.");
        }

        // Catch equal start or end.
        if ( entry.min === entry.max ) {
            throw new Error("noUiSlider: 'range' 'min' and 'max' cannot be equal.");
        }

        parsed.spectrum = new Spectrum(entry, parsed.snap, parsed.dir, parsed.singleStep);
    }

    function testStart ( parsed, entry ) {

        entry = asArray(entry);

View on GitHub (pinned to 824e78248b)

Solutions

Use the object form: range: { min: 0, max: 100 }.
Build the object explicitly from dynamic bounds: { min: lo, max: hi }.
If range is conditional, default to a valid object instead of null.

Example fix

// before
range: [min, max]
// after
range: { min: min, max: max }

Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof opts.range !== 'object' || opts.range === null || Array.isArray(opts.range)) {
  throw new TypeError('range must be a plain object { min, max }');
}

Type guard

function isRangeObject(v) { return v !== null && typeof v === 'object' && !Array.isArray(v); }

Try / catch

try { noUiSlider.create(el, opts); }
catch (e) { if (/range' is not an object/.test(e.message)) { opts.range = { min: lo, max: hi }; /* retry */ } else throw e; }

Prevention

Do not pass [min, max] arrays; noUiSlider uses the object form exclusively.
Default range to a valid object instead of null when the feature is optional.
Add a TypeScript type for the options object to catch shape errors at compile time.

When it happens

Trigger: range: [0, 100], range: '0-100', range: 100, range: null, or range: undefined when the key is still passed.

Common situations: Assuming range takes a [min, max] array (common in other slider libraries), passing null to 'disable' the feature, or spreading the wrong variable into the options object.

Related errors

AI-assisted analysis of Dogfalo/materialize@824e78248b (2026-08-13). Data as JSON: /api/errors/04fc22820f9471ae. Report an issue: GitHub.