ankane/pghero · error · Error

noUiSlider: create requires a single element, got: {target}

Error message

noUiSlider: create requires a single element, got: {target}

What it means

initialize() requires a single DOM element as its first argument and checks it by looking for a truthy target with a nodeName property. A CSS selector string, null (element not found), a jQuery collection, or a NodeList all fail this check and throw with the offending target interpolated into the message.

Source

Thrown at app/assets/javascripts/pghero/nouislider.js:2314

            removePips: removePips,
            removeTooltips: removeTooltips,
            getPositions: function () {
                return scope_Locations.slice();
            },
            getTooltips: function () {
                return scope_Tooltips;
            },
            getOrigins: function () {
                return scope_Handles;
            },
            pips: pips, // Issue #594
        };
        return scope_Self;
    }
    // Run the standard initializer
    function initialize(target, originalOptions) {
        if (!target || !target.nodeName) {
            throw new Error("noUiSlider: create requires a single element, got: " + target);
        }
        // Throw an error if the slider was already initialized.
        if (target.noUiSlider) {
            throw new Error("noUiSlider: Slider was already initialized.");
        }
        // Test the options and create the slider environment;
        var options = testOptions(originalOptions);
        var api = scope(target, options, originalOptions);
        target.noUiSlider = api;
        return api;
    }
    var nouislider = {
        // Exposed for unit testing, don't use this in your application.
        __spectrum: Spectrum,
        // A reference to the default classes, allows global changes.
        // Use the cssClasses option for changes to one slider.
        cssClasses: cssClasses,
        create: initialize,

View on GitHub (pinned to 7edb57986f)

Solutions

Pass a resolved element: const el = document.querySelector(".slider"); then create(el, options)
Run initialization after the DOM is ready (DOMContentLoaded) or after the framework confirms the element is mounted
For multiple sliders, iterate the NodeList and create one slider per element

Example fix

// before
noUiSlider.create(".slider", options);

// after
const el = document.querySelector(".slider");
if (el) noUiSlider.create(el, options);

Defensive patterns

Strategy: type-guard

Validate before calling

const el = typeof target === "string" ? document.querySelector(target) : target;
if (el instanceof HTMLElement) {
  noUiSlider.create(el, options);
}

Type guard

function isSliderTarget(t) {
  return t instanceof HTMLElement;
}

Prevention

Never pass selector strings or jQuery objects - resolve to a single HTMLElement first
Initialize after DOMContentLoaded or after your framework confirms the node is mounted

When it happens

Trigger: noUiSlider.create(".slider", options) instead of passing document.querySelector(".slider"); calling create before the element exists (script in <head> without defer, or element rendered later by AJAX) so querySelector returns null; passing $(".slider") from jQuery; passing document.querySelectorAll(".slider") for multiple elements.

Common situations: Rails apps with Turbo/Turbolinks where the DOM is replaced and initialization runs before the new element exists; SPAs that mount sliders conditionally; developers used to jQuery-style plugin APIs that accept selector strings.

Related errors

AI-assisted analysis of ankane/pghero@7edb57986f (2026-08-21). Data as JSON: /api/errors/12846be92b0f3c41. Report an issue: GitHub.