Dogfalo/materialize · error · Error

noUiSlider: '${name}' is required.

Error message

noUiSlider: '${name}' is required.

What it means

noUiSlider marks certain options as required (tests[name].r === true). The current build requires 'start', 'connect', 'direction', 'range', and 'behaviour'. If such an option is neither supplied by the caller nor present in the defaults map, initialization aborts with the option name interpolated into the message.

Source

Thrown at extras/noUiSlider/nouislider.js:870

                valueHorizontal: 'value-horizontal',
                valueVertical: 'value-vertical',
                valueNormal: 'value-normal',
                valueLarge: 'value-large',
                valueSub: 'value-sub'
            },
            'useRequestAnimationFrame': true
        };

        // Run all options through a testing mechanism to ensure correct
        // input. It should be noted that options might get modified to
        // be handled properly. E.g. wrapping integers in arrays.
        Object.keys(tests).forEach(function( name ){

            // If the option isn't set, but it is required, throw an error.
            if ( options[name] === undefined && defaults[name] === undefined ) {

                if ( tests[name].r ) {
                    throw new Error("noUiSlider: '" + name + "' is required.");
                }

                return true;
            }

            tests[name].t( parsed, options[name] === undefined ? defaults[name] : options[name] );
        });

        // Forward pips options
        parsed.pips = options.pips;

        var styles = [['left', 'top'], ['right', 'bottom']];

        // Pre-define the styles.
        parsed.style = styles[parsed.dir][parsed.ort];
        parsed.styleOposite = styles[parsed.dir?0:1][parsed.ort];

        return parsed;

View on GitHub (pinned to 824e78248b)

Solutions

1. Add the named option. Identify which one from the message text where ${name} is replaced.
2. For 'range' supply { min, max }; for 'start' supply a number or array of initial handle positions.
3. Centralize a base options object that includes all required keys, then merge in overrides.

Example fix

// before
noUiSlider.create(el, { start: 0, connect: true, direction: 'ltr', behaviour: 'tap' });
// after
noUiSlider.create(el, { start: 0, connect: true, direction: 'ltr', behaviour: 'tap', range: { min: 0, max: 100 } });

const REQUIRED = ['start', 'connect', 'direction', 'range', 'behaviour'];
function assertRequired(opts) {
  for (const k of REQUIRED) {
    if (opts[k] === undefined) throw new Error(`noUiSlider: '${k}' is required.`);
  }
}

function hasAllRequired(opts) {
  return REQUIRED.every(k => opts[k] !== undefined);
}

When it happens

Trigger: Call noUiSlider.create() omitting any required option that has no default: most commonly 'range' or 'start'. E.g. noUiSlider.create(el, { start: 0 }) without a range, or noUiSlider.create(el, { range:{min:0,max:100} }) without start.

Common situations: Forgetting the range block, copying a partial config example, or destructuring options in a way that drops a required field. Also common when building options dynamically and a conditional skips setting 'range'.

Related errors

• 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
• noUiSlider: must pass a formatter for all handles.

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