Dogfalo/materialize · error · Error

noUiSlider: must pass a formatter for all handles.

Error message

noUiSlider: must pass a formatter for all handles.

What it means

When 'tooltips' is not a boolean it is treated as a per-handle array via asArray(entry). noUiSlider requires one tooltip entry per handle, so a length mismatch throws before any tooltip is rendered.

Source

Thrown at extras/noUiSlider/nouislider.js:720

        if ( entry === false ) {
            return;
        }

        else if ( entry === true ) {

            parsed.tooltips = [];

            for ( var i = 0; i < parsed.handles; i++ ) {
                parsed.tooltips.push(true);
            }
        }

        else {

            parsed.tooltips = asArray(entry);

            if ( parsed.tooltips.length !== parsed.handles ) {
                throw new Error("noUiSlider: must pass a formatter for all handles.");
            }

            parsed.tooltips.forEach(function(formatter){
                if ( typeof formatter !== 'boolean' && (typeof formatter !== 'object' || typeof formatter.to !== 'function') ) {
                    throw new Error("noUiSlider: 'tooltips' must be passed a formatter or 'false'.");
                }
            });
        }
    }

    function testFormat ( parsed, entry ) {

        parsed.format = entry;

        // Any object with a to and from method is supported.
        if ( typeof entry.to === 'function' && typeof entry.from === 'function' ) {
            return true;
        }

View on GitHub (pinned to 824e78248b)

Solutions

1. Make the tooltips array length exactly equal to start.length.
2. For all-on or all-off, pass a plain boolean (true/false) instead of an array so the library expands it per handle.
3. If only some handles need tooltips, build the array programmatically from start.length.

Example fix

// before
noUiSlider.create(el, { start: [0, 50, 100], range:{min:0,max:100}, tooltips: [true, false] });
// after
noUiSlider.create(el, { start: [0, 50, 100], range:{min:0,max:100}, tooltips: [true, false, true] });

function assertTooltipsMatch(opts) {
  const handles = Array.isArray(opts.start) ? opts.start.length : 1;
  if (Array.isArray(opts.tooltips) && opts.tooltips.length !== handles) {
    throw new Error(`tooltips length ${opts.tooltips.length} !== handles ${handles}`);
  }
}

function tooltipsMatchHandles(opts) {
  const handles = Array.isArray(opts.start) ? opts.start.length : 1;
  return !Array.isArray(opts.tooltips) || opts.tooltips.length === handles;
}

When it happens

Trigger: Call noUiSlider.create() with options.tooltips as an array whose length differs from options.start.length. E.g. start:[0,50,100] with tooltips:[true, false], or start:[0,50] with tooltips:[true,false,true].

Common situations: Adding/removing a handle but forgetting to update tooltips; passing a single-element array for a multi-handle slider; or assuming tooltips auto-expands like a boolean default.

Related errors

• noUiSlider: 'tooltips' must be passed a formatter 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/768ed8401c427a22. Report an issue: GitHub.