Dogfalo/materialize · error · Error

noUiSlider: 'range' contains invalid value.

Error message

noUiSlider: 'range' contains invalid value.

What it means

Thrown by handleEntryPoint while parsing each entry of the 'range' option. After wrapping a number into an array, the code requires the value to be an array; anything that is neither a number nor an array (string, null, boolean, plain object) is rejected before any percentage conversion happens. noUiSlider expects each range value to be a number like 100 or a [value, step] pair, so structurally wrong inputs fail fast here rather than producing a broken scale.

Source

Thrown at extras/noUiSlider/nouislider.js:289

                xSteps[j-1]
            );
    }


// Entry parsing

    function handleEntryPoint ( index, value, that ) {

        var percentage;

        // Wrap numerical input in an array.
        if ( typeof value === "number" ) {
            value = [value];
        }

        // 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 );

View on GitHub (pinned to 824e78248b)

Solutions

1. Pass real numbers: range: { min: 0, max: 100 }.
2. If sourcing from DOM/JSON, coerce with Number(raw) and verify !isNaN before building the slider.
3. For a per-stop step use the array form [value, step] with numeric elements, e.g. { '50%': [50, 10] }.

Example fix

// before
range: { min: "0", max: "100" }
// after
range: { min: Number(rawMin), max: Number(rawMax) }

function assertRangeValuesNumeric(range) {
  for (const key of Object.keys(range)) {
    const v = range[key];
    const val = typeof v === 'number' ? v : (Array.isArray(v) ? v[0] : undefined);
    if (typeof val !== 'number' || !Number.isFinite(val)) {
      throw new TypeError("range['" + key + "'] must be a number or [number, step]");
    }
  }
}
assertRangeValuesNumeric(opts.range);

function isRangeValue(v) {
  return typeof v === 'number' || (Array.isArray(v) && typeof v[0] === 'number');
}

try { noUiSlider.create(el, opts); }
catch (e) {
  if (/range' contains invalid value/.test(e.message)) { /* coerce range values to numbers and retry once */ }
  else throw e;
}

When it happens

Trigger: range: { min: "0", max: 100 } (string value), range: { min: null, max: 100 }, range: { min: true, max: 100 }, or range: { min: { v: 0 }, max: 100 } (object literal as a value).

Common situations: Reading min/max from DOM data attributes (always strings), from a JSON endpoint that quoted the numbers, or pasting config from docs whose formatting turned numbers into strings. Also happens when a value field is conditionally set and left null/undefined.

Related errors

• noUiSlider: 'range' value isn't numeric.
• noUiSlider: 'step' is not numeric.
• noUiSlider: 'range' is not an object.
• noUiSlider: Missing 'min' or 'max' in 'range'.
• noUiSlider: 'range' 'min' and 'max' cannot be equal.

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