Dogfalo/materialize · error · Error

Slider was already initialized.

Error message

Slider was already initialized.

What it means

noUiSlider stamps the created API onto target.noUiSlider. The initializer guards against double initialization by throwing if that property already exists, preventing duplicate event bindings, overlapping handles, and orphaned DOM.

Source

Thrown at extras/noUiSlider/nouislider.js:2079

            // Save current spectrum direction as testOptions in testRange call
            // doesn't rely on current direction
            newOptions.spectrum.direction = scope_Spectrum.direction;
            scope_Spectrum = newOptions.spectrum;

            // Limit, margin and padding depend on the spectrum but are stored outside of it. (#677)
            options.margin = newOptions.margin;
            options.limit = newOptions.limit;
            options.padding = newOptions.padding;

            // Invalidate the current positioning so valueSet forces an update.
            scope_Locations = [];
            valueSet(optionsToUpdate.start || v, fireSetEvent);
        }

        // Throw an error if the slider was already initialized.
        if ( scope_Target.noUiSlider ) {
            throw new Error('Slider was already initialized.');
        }

        // Create the base element, initialise HTML and set classes.
        // Add handles and connect elements.
        addSlider(scope_Target);
        addElements(options.connect, scope_Base);

        scope_Self = {
            destroy: destroy,
            steps: getCurrentStep,
            on: bindEvent,
            off: removeEvent,
            get: valueGet,
            set: valueSet,
            reset: valueReset,
            // Exposed for unit testing, don't use this in your application.
            __moveHandles: function(a, b, c) { moveHandles(a, b, scope_Locations, c); },
            options: originalOptions, // Issue #600, #678

View on GitHub (pinned to 824e78248b)

Solutions

1. Call el.noUiSlider.destroy() before re-creating, or in a framework cleanup hook.
2. Guard with: if (!el.noUiSlider) noUiSlider.create(el, opts);
3. In React useEffect, return () => el.noUiSlider && el.noUiSlider.destroy().

Example fix

// before
useEffect(() => { noUiSlider.create(ref.current, opts); }, []);
// after
useEffect(() => {
  noUiSlider.create(ref.current, opts);
  return () => ref.current.noUiSlider && ref.current.noUiSlider.destroy();
}, []);

function safeCreate(el, opts) {
  if (el.noUiSlider) {
    el.noUiSlider.destroy();
  }
  return noUiSlider.create(el, opts);
}

function isInitialized(el) { return !!el && !!el.noUiSlider; }

try {
  noUiSlider.create(el, opts);
} catch (e) {
  if (/already initialized/.test(e.message) && el.noUiSlider) {
    el.noUiSlider.destroy();
    noUiSlider.create(el, opts);
  } else { throw e; }
}

When it happens

Trigger: Call noUiSlider.create(el, ...) twice on the same DOM element without first calling el.noUiSlider.destroy(). Common in React/Vue/jQuery when a component re-mounts or a re-render re-runs the create call.

Common situations: React useEffect without a cleanup, jQuery plugin reapplied to an existing element, re-running a setup function after a route change, or hot-module reloading that re-executes module init.

Related errors

• noUiSlider.create requires a single element.
• noUiSlider: 'range' contains invalid value.
• noUiSlider: 'range' value isn't numeric.
• noUiSlider: 'start' option is incorrect.
• noUiSlider: 'padding' option must be less than half the rang

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