What causes "noUiSlider: 'animate' option must be a boolean." in Dogfalo/materialize?

Dogfalo/materialize · error · Error

noUiSlider: 'animate' option must be a boolean.

Error message

noUiSlider: 'animate' option must be a boolean.

What it means

Thrown by testAnimate when 'animate' is not a boolean. animate controls whether handle movement is animated; like snap it requires a real boolean and rejects numeric/string stand-ins. The value is assigned first, so the throw is what actually stops init.

Source

Thrown at extras/noUiSlider/nouislider.js:528

    }

    function testSnap ( parsed, entry ) {

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

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

    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

View on GitHub (pinned to 824e78248b)

Solutions

Use literal true or false.
Coerce: animate: Boolean(raw) when raw is genuinely boolean-ish.
Omit animate to use the default (true).

Example fix

// before
animate: cfg.animate       // cfg.animate === 'true'
// after
animate: Boolean(cfg.animate)

Defensive patterns

Strategy: type-guard

Validate before calling

if (opts.animate != null && typeof opts.animate !== 'boolean') {
  throw new TypeError('animate must be a boolean');
}

Type guard

function isBoolean(v) { return typeof v === 'boolean'; }

Try / catch

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

Prevention

Treat animate as a real boolean at the config boundary.
Beware 'false' strings, which are truthy and would also misbehave if accepted.
Omit the option to accept the default rather than passing undefined explicitly.

When it happens

Trigger: animate: 1, animate: 0, animate: 'true', animate: 'false' (truthy string).

Common situations: String from DOM/JSON, a numeric flag from a settings object, or a framework binding that turns the attribute into a string.

Related errors

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