Dogfalo/materialize · error · Error

noUiSlider: 'connect' option doesn't match handle count.

Error message

noUiSlider: 'connect' option doesn't match handle count.

What it means

Thrown by testConnect after legacy 'lower'/'upper' mapping and boolean expansion, when connect is not an array of length parsed.handles + 1. The connect array marks which gaps (before, between, and after handles) get a filled bar, so its length must be exactly one more than the number of handles.

Source

Thrown at extras/noUiSlider/nouislider.js:567

        }

        else if ( entry === 'upper' ) {
            entry = [false, true];
        }

        // Handle boolean options
        if ( entry === true || entry === false ) {

            for ( i = 1; i < parsed.handles; i++ ) {
                connect.push(entry);
            }

            connect.push(false);
        }

        // Reject invalid input
        else if ( !Array.isArray( entry ) || !entry.length || entry.length !== parsed.handles + 1 ) {
            throw new Error("noUiSlider: 'connect' option doesn't match handle count.");
        }

        else {
            connect = entry;
        }

        parsed.connect = connect;
    }

    function testOrientation ( parsed, entry ) {

        // Set orientation to an a numerical value for easy
        // array selection.
        switch ( entry ){
            case 'horizontal':
                parsed.ort = 0;
                break;
            case 'vertical':

View on GitHub (pinned to 824e78248b)

Solutions

1. Size connect to start.length + 1.
2. For a uniform fill use a single boolean: connect: true (the library expands it).
3. Use the legacy 'lower' or 'upper' strings for the common two-handle edge cases.

Example fix

// before
start: [10, 90], connect: [true, false]
// after
start: [10, 90], connect: [true, false, true]

const handles = (Array.isArray(opts.start) ? opts.start : [opts.start]).length;
let connect = opts.connect;
if (connect === 'lower') connect = [true, false];
else if (connect === 'upper') connect = [false, true];
if (connect === true || connect === false) connect = [false].concat(new Array(handles - 1).fill(connect), false);
if (!Array.isArray(connect) || connect.length !== handles + 1) {
  throw new Error('connect must have length ' + (handles + 1));
}

try { noUiSlider.create(el, opts); }
catch (e) { if (/connect' option doesn't match/.test(e.message)) { opts.connect = new Array(handles + 1).fill(false); /* retry */ } else throw e; }

When it happens

Trigger: Two handles with connect: [true, false] (length 2, need 3). Single handle with connect: [true] (need length 2). connect: 'middle' (unrecognized). Wrong-length array from a different handle-count example.

Common situations: Adding or removing a handle without resizing connect, copy-pasting a connect config from a sample with a different handle count, or assuming connect length equals handles (it is handles + 1).

Related errors

• noUiSlider: 'limit' option is only supported on linear slide
• noUiSlider: 'range' contains invalid value.
• noUiSlider: 'range' value isn't numeric.
• noUiSlider: 'limit', 'margin' and 'padding' must be divisibl
• noUiSlider: 'step' is not numeric.

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