What causes "noUiSlider: 'range' value isn't numeric." in Dogfalo/materialize?

Use only 'min', 'max', and 'NN%' string keys (with the trailing percent sign) for stops.

Dogfalo/materialize · error · Error

noUiSlider: 'range' value isn't numeric.

Error message

noUiSlider: 'range' value isn't numeric.

What it means

Thrown by handleEntryPoint after the array check passes, when either the key's derived percentage or the entry value value[0] fails isNumeric. The percentage is 0/100 for 'min'/'max' or parseFloat(key) for stop keys like '50%'; a non-parseable key or a non-numeric array element lands here. This separates 'structurally invalid' (error 0) from 'structurally OK but not a number'.

Source

Thrown at extras/noUiSlider/nouislider.js:303

        }

        // Reject any invalid input, by testing whether value is an array.
        if ( Object.prototype.toString.call( value ) !== '[object Array]' ){
            throw new Error("noUiSlider: 'range' contains invalid value.");
        }

        // Covert min/max syntax to 0 and 100.
        if ( index === 'min' ) {
            percentage = 0;
        } else if ( index === 'max' ) {
            percentage = 100;
        } else {
            percentage = parseFloat( index );
        }

        // Check for correct input.
        if ( !isNumeric( percentage ) || !isNumeric( value[0] ) ) {
            throw new Error("noUiSlider: 'range' value isn't numeric.");
        }

        // Store values.
        that.xPct.push( percentage );
        that.xVal.push( value[0] );

        // NaN will evaluate to false too, but to keep
        // logging clear, set step explicitly. Make sure
        // not to override the 'step' setting with false.
        if ( !percentage ) {
            if ( !isNaN( value[1] ) ) {
                that.xSteps[0] = value[1];
            }
        } else {
            that.xSteps.push( isNaN(value[1]) ? false : value[1] );
        }

        that.xHighestCompleteStep.push(0);

View on GitHub (pinned to 824e78248b)

Solutions

Use only 'min', 'max', and 'NN%' string keys (with the trailing percent sign) for stops.
Make sure the value, or value[0] of the [value, step] array, is a real finite number.
Validate each entry with Number.isFinite before constructing the range object.

Example fix

// before
range: { min: 0, half: 50, max: 100 }
// after
range: { min: 0, '50%': 50, max: 100 }

Defensive patterns

Strategy: validation

Validate before calling

function assertRangeKeysAndValues(range) {
  for (const key of Object.keys(range)) {
    const pct = key === 'min' ? 0 : key === 'max' ? 100 : parseFloat(key);
    if (!Number.isFinite(pct)) throw new TypeError("range key '" + key + "' must be 'min', 'max', or 'NN%'");
    const v0 = Array.isArray(range[key]) ? range[key][0] : range[key];
    if (typeof v0 !== 'number' || !Number.isFinite(v0)) throw new TypeError("range['" + key + "'] value must be numeric");
  }
}

Type guard

const RANGE_KEY = /^(min|max|\d+%)$/;
function isRangeEntry(key, v) {
  return RANGE_KEY.test(key) && (typeof v === 'number' || (Array.isArray(v) && typeof v[0] === 'number'));
}

Try / catch

try { noUiSlider.create(el, opts); }
catch (e) { if (/range' value isn't numeric/.test(e.message)) { /* fix keys/values, retry */ } else throw e; }

Prevention

Always suffix intermediate stop keys with '%'.
Validate the [value, step] array order: value first, step second.
Run range entries through Number.isFinite before building the slider.

When it happens

Trigger: A bad stop key: range: { min: 0, half: 50, max: 100 } (parseFloat('half') is NaN). A non-numeric array element: range: { min: [null, 1], max: 100 } or range: { min: ['x'], max: 100 }.

Common situations: Forgetting the trailing '%' on an intermediate stop key, declaring a stop as [step, value] in the wrong order, or pulling values from uncoerced form fields that yield null/NaN.

Related errors

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