Dogfalo/materialize · error · Error

noUiSlider: 'animationDuration' option must be a number.

Error message

noUiSlider: 'animationDuration' option must be a number.

What it means

Thrown by testAnimationDuration when the value is not typeof === 'number'. animationDuration sets the length of the animated movement in milliseconds; CSS-style duration strings or quoted numbers are not parsed.

Source

Thrown at extras/noUiSlider/nouislider.js:537

        }
    }

    function testAnimate ( parsed, entry ) {

        // Enforce 100% stepping within subranges.
        parsed.animate = entry;

        if ( typeof entry !== 'boolean' ){
            throw new Error("noUiSlider: 'animate' option must be a boolean.");
        }
    }

    function testAnimationDuration ( parsed, entry ) {

        parsed.animationDuration = entry;

        if ( typeof entry !== 'number' ){
            throw new Error("noUiSlider: 'animationDuration' option must be a number.");
        }
    }

    function testConnect ( parsed, entry ) {

        var connect = [false];
        var i;

        // Map legacy options
        if ( entry === 'lower' ) {
            entry = [true, false];
        }

        else if ( entry === 'upper' ) {
            entry = [false, true];
        }

        // Handle boolean options

View on GitHub (pinned to 824e78248b)

Solutions

1. Pass a bare number of milliseconds: animationDuration: 300.
2. Parse strings yourself: parseInt(raw, 10) after validation.
3. Omit the option for the default duration.

Example fix

// before
animationDuration: "300"
// after
animationDuration: 300

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

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

try { noUiSlider.create(el, opts); }
catch (e) { if (/animationDuration' option must be a number/.test(e.message)) { opts.animationDuration = parseInt(opts.animationDuration, 10); /* retry */ } else throw e; }

When it happens

Trigger: animationDuration: '300', animationDuration: '0.3s', animationDuration: true, animationDuration: null.

Common situations: Passing a CSS duration string, a quoted number from a config file, or a value with a unit suffix.

Related errors

• noUiSlider: 'range' contains invalid value.
• noUiSlider: 'step' is not numeric.
• noUiSlider: 'margin' option must be numeric.
• noUiSlider: 'limit' option must be numeric.
• noUiSlider: 'padding' option must be numeric.

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