ankane/pghero · error · Error

noUiSlider: Slider was already initialized.

Error message

noUiSlider: Slider was already initialized.

What it means

initialize() stores the API on the element itself (target.noUiSlider) and refuses to run twice on the same element: if that property is already set it throws this Error. It guards against double initialization corrupting the existing slider's DOM and event bindings.

Source

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

            },
            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,
    };

    exports.create = initialize;
    exports.cssClasses = cssClasses;

View on GitHub (pinned to 7edb57986f)

Solutions

1. Guard before creating: if (!el.noUiSlider) { noUiSlider.create(el, options); }
2. Or destroy first when rebuilding: if (el.noUiSlider) { el.noUiSlider.destroy(); } then create again
3. Move initialization to a single lifecycle hook that cannot re-run for the same DOM node

Example fix

// before
noUiSlider.create(el, options);

// after
if (el.noUiSlider) {
  el.noUiSlider.destroy();
}
noUiSlider.create(el, options);

if (el.noUiSlider) {
  el.noUiSlider.destroy(); // or return early to reuse the existing slider
}
noUiSlider.create(el, options);

When it happens

Trigger: Calling noUiSlider.create on an element that was already initialized - typically when an init function runs again after a Turbo/Turbolinks page restore (cached page), a React useEffect running twice (e.g. StrictMode), or a hot-reload / partial page refresh that re-runs setup scripts without removing the old slider.

Common situations: Rails UJS :page:load and turbolinks:load both firing; JavaScript bundled once but executed on every AJAX content swap; dev-time hot module replacement re-executing the module.

Related errors

• noUiSlider: create requires a single element, got: {target}
• noUiSlider: 'cssClasses' must be an object.
• noUiSlider: '{name}' is required.
• noUiSlider: 'values' (>= 2) required for mode 'count'.
• noUiSlider: invalid handle number, got: {handleNumber}

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