Dogfalo/materialize · error · Error

noUiSlider: 'useRequestAnimationFrame' option should be true

Error message

noUiSlider: 'useRequestAnimationFrame' option should be true (default) or false.

What it means

The 'useRequestAnimationFrame' option toggles whether noUiSlider animates handle movement via requestAnimationFrame. It is a strict boolean switch; any other type (string 'true', number 1, undefined-as-not-allowed) is rejected because the animation scheduler does a strict comparison.

Source

Thrown at extras/noUiSlider/nouislider.js:775

        if ( typeof parsed.cssPrefix === 'string' ) {
            parsed.cssClasses = {};

            for ( var key in entry ) {
                if ( !entry.hasOwnProperty(key) ) { continue; }

                parsed.cssClasses[key] = parsed.cssPrefix + entry[key];
            }
        } else {
            parsed.cssClasses = entry;
        }
    }

    function testUseRaf ( parsed, entry ) {
        if ( entry === true || entry === false ) {
            parsed.useRequestAnimationFrame = entry;
        } else {
            throw new Error("noUiSlider: 'useRequestAnimationFrame' option should be true (default) or false.");
        }
    }

    // Test all developer settings and parse to assumption-safe values.
    function testOptions ( options ) {

        // To prove a fix for #537, freeze options here.
        // If the object is modified, an error will be thrown.
        // Object.freeze(options);

        var parsed = {
            margin: 0,
            limit: 0,
            padding: 0,
            animate: true,
            animationDuration: 300,
            format: defaultFormatter
        };

View on GitHub (pinned to 824e78248b)

Solutions

1. Pass a literal boolean: useRequestAnimationFrame: true or false.
2. If the value comes from JSON or input, coerce explicitly: Boolean(raw) or raw === 'true' for string sources.
3. Omit the option to keep the default true.

Example fix

// before
noUiSlider.create(el, { start: 0, range:{min:0,max:100}, useRequestAnimationFrame: 'false' });
// after
noUiSlider.create(el, { start: 0, range:{min:0,max:100}, useRequestAnimationFrame: false });

function normalizeUseRaf(raw) {
  if (raw === undefined) return true;
  if (raw === true || raw === false) return raw;
  if (typeof raw === 'string') return raw === 'true';
  throw new TypeError('useRequestAnimationFrame must be boolean');
}

function isStrictBoolean(v) { return v === true || v === false; }

When it happens

Trigger: Pass options.useRequestAnimationFrame as anything other than the literal true or false: a string ('true'), a number (0/1), null, or 'default'.

Common situations: Loading options from JSON where booleans became strings ('false'), passing 0/1 from a checkbox/toggle library, or copy-pasting the string 'true' from documentation examples.

Related errors

• noUiSlider: 'padding' option must be less than half the rang
• noUiSlider: 'direction' option was not recognized.
• noUiSlider: 'behaviour' must be a string containing options.
• noUiSlider: 'fixed' behaviour must be used with 2 handles
• noUiSlider: must pass a formatter for all handles.

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