Dogfalo/materialize · error · Error

noUiSlider: 'step' is not numeric.

Error message

noUiSlider: 'step' is not numeric.

What it means

Thrown by testStep when the 'step' option fails isNumeric. isNumeric requires typeof === 'number' and a finite non-NaN value, so numeric strings like '10' are rejected outright, not coerced. step defines the increment between reachable slider values on a linear range.

Source

Thrown at extras/noUiSlider/nouislider.js:466

	 structured with an item for every option available. An
	 option can be marked as required by setting the 'r' flag.
	 The testing function is provided with three arguments:
	 - The provided value for the option;
	 - A reference to the options object;
	 - The name for the option;

	 The testing function returns false when an error is detected,
	 or true when everything is OK. It can also modify the option
	 object, to make sure all values can be correctly looped elsewhere. */

    var defaultFormatter = { 'to': function( value ){
        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'.");
        }

View on GitHub (pinned to 824e78248b)

Solutions

1. Pass a literal number: step: 10.
2. Coerce strings explicitly after an isFinite check: const s = Number(raw); if (!isFinite(s)) ... ; step: s.
3. Omit step entirely if the default (1) is acceptable.

Example fix

// before
step: el.dataset.step
// after
step: Number(el.dataset.step)

if (opts.step != null) {
  const s = Number(opts.step);
  if (typeof opts.step !== 'number' || !Number.isFinite(s)) throw new TypeError('step must be a finite number');
  opts.step = s;
}

function isStep(v) { return typeof v === 'number' && Number.isFinite(v); }

try { noUiSlider.create(el, opts); }
catch (e) { if (/step' is not numeric/.test(e.message)) { opts.step = Number(opts.step); /* retry */ } else throw e; }

When it happens

Trigger: step: '10', step: '5px', step: NaN, step: null (typeof null is 'object'), step: Infinity, or step: undefined passed explicitly.

Common situations: Reading step from element.dataset (always a string), from a query string or env var, or from JSON where the number was quoted. Carrying a CSS unit suffix.

Related errors

• noUiSlider: 'range' contains invalid value.
• noUiSlider: 'limit', 'margin' and 'padding' must be divisibl
• noUiSlider: 'animationDuration' option must be a number.
• noUiSlider: 'margin' option must be numeric.
• noUiSlider: 'limit' option must be numeric.

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