Dogfalo/materialize · error · Error

noUiSlider: 'cssClasses' must be an object.

Error message

noUiSlider: 'cssClasses' must be an object.

What it means

The 'cssClasses' option overrides the map of CSS class names noUiSlider uses internally. It must be a plain object (or undefined for defaults); the library iterates its keys with for-in to rebuild class names when cssPrefix is set, so a non-object breaks that loop.

Source

Thrown at extras/noUiSlider/nouislider.js:755

            return true;
        }

        throw new Error("noUiSlider: 'format' requires 'to' and 'from' methods.");
    }

    function testCssPrefix ( parsed, entry ) {

        if ( entry !== undefined && typeof entry !== 'string' && entry !== false ) {
            throw new Error("noUiSlider: 'cssPrefix' must be a string or `false`.");
        }

        parsed.cssPrefix = entry;
    }

    function testCssClasses ( parsed, entry ) {

        if ( entry !== undefined && typeof entry !== 'object' ) {
            throw new Error("noUiSlider: 'cssClasses' must be an object.");
        }

        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;

View on GitHub (pinned to 824e78248b)

Solutions

1. Pass an object whose keys map to class name strings, matching the default cssClasses structure.
2. Omit cssClasses to use the built-in defaults.
3. If overriding only some classes, spread defaults: cssClasses: { ...defaultCssClasses, target: 'my-target' }.

Example fix

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

function assertCssClasses(opts) {
  if (opts.cssClasses !== undefined && (typeof opts.cssClasses !== 'object' || opts.cssClasses === null)) {
    throw new TypeError('cssClasses must be an object');
  }
}

function isCssClassesMap(v) {
  return v === undefined || (typeof v === 'object' && v !== null && !Array.isArray(v));
}

When it happens

Trigger: Pass options.cssClasses as a string, number, array, boolean, or null. For example cssClasses: 'my-class' or cssClasses: ['a','b'].

Common situations: Developers pass a single class string instead of a map, pass null to 'reset' (use undefined), or pass an array of class names. Also occurs when cssClasses is sourced from JSON that serialized an object as an array.

Related errors

• noUiSlider: 'cssPrefix' must be a string or `false`.
• 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

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