Dogfalo/materialize · error · Error

noUiSlider.create requires a single element.

Error message

noUiSlider.create requires a single element.

What it means

The initialize() entry point expects a single DOM element and detects that by checking for the nodeName property. Anything without nodeName (a selector string, a NodeList, a jQuery collection, an array, or null) is rejected before options are tested.

Source

Thrown at extras/noUiSlider/nouislider.js:2126

        if ( options.pips ) {
            pips(options.pips);
        }

        if ( options.tooltips ) {
            tooltips();
        }

        return scope_Self;

    }


    // Run the standard initializer
    function initialize ( target, originalOptions ) {

        if ( !target.nodeName ) {
            throw new Error('noUiSlider.create requires a single element.');
        }

        if (originalOptions.tooltips === undefined) {
            originalOptions.tooltips = true;
        }

        // Test the options and create the slider environment;
        var options = testOptions( originalOptions, target );
        var api = closure( target, options, originalOptions );

        target.noUiSlider = api;

        return api;
    }

    // Use an object instead of a function for future expansibility;
    return {
        create: initialize

View on GitHub (pinned to 824e78248b)

Solutions

1. Pass a single element: document.querySelector('.slider') or document.getElementById('slider').
2. Unwrap jQuery: $('#slider')[0], or a NodeList: list[0].
3. If you have multiple sliders, loop and call create once per element.

Example fix

// before
noUiSlider.create(document.querySelectorAll('.slider'), opts);
// after
noUiSlider.create(document.querySelector('.slider'), opts);

function resolveTarget(target) {
  if (target && typeof target.nodeName === 'string') return target;
  if (typeof target === 'string') return document.querySelector(target);
  if (target && typeof target.get === 'function') return target.get(0); // jQuery
  if (target && typeof target.length === 'number' && target[0]) return target[0];
  throw new TypeError('noUiSlider.create requires a single DOM element');
}

function isSingleElement(t) {
  return !!t && typeof t === 'object' && typeof t.nodeName === 'string' && t.nodeType === 1;
}

When it happens

Trigger: Call noUiSlider.create('.slider', opts), noUiSlider.create(document.querySelectorAll('.slider'), opts), noUiSlider.create($('#slider'), opts) (jQuery object), or noUiSlider.create(null, opts).

Common situations: Migrating from a jQuery-plugin API that accepted selectors, passing querySelectorAll (which returns a NodeList) instead of querySelector, or passing a jQuery-wrapped element without [0].

Related errors

• noUiSlider: 'behaviour' must be a string containing options.
• Slider was already initialized.
• noUiSlider: 'range' contains invalid value.
• noUiSlider: 'range' value isn't numeric.
• noUiSlider: 'range' is not an object.

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