ankane/pghero · error · Error

noUiSlider: '{name}' is required.

Error message

noUiSlider: '{name}' is required.

What it means

During create(), noUiSlider runs every option through a test suite; options flagged as required (tests[name].r, notably start) must be present. isSet(options[name]) is false and no default exists, so the loop throws "noUiSlider: '{name}' is required." with the option name interpolated. In practice the name is almost always 'start' - the initial handle value(s).

Source

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

            keyboardSupport: true,
            cssPrefix: "noUi-",
            cssClasses: cssClasses,
            keyboardPageMultiplier: 5,
            keyboardMultiplier: 1,
            keyboardDefaultStep: 10,
        };
        // AriaFormat defaults to regular format, if any.
        if (options.format && !options.ariaFormat) {
            options.ariaFormat = options.format;
        }
        // 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 (!isSet(options[name]) && defaults[name] === undefined) {
                if (tests[name].r) {
                    throw new Error("noUiSlider: '" + name + "' is required.");
                }
                return;
            }
            tests[name].t(parsed, !isSet(options[name]) ? defaults[name] : options[name]);
        });
        // Forward pips options
        parsed.pips = options.pips;
        // All recent browsers accept unprefixed transform.
        // We need -ms- for IE9 and -webkit- for older Android;
        // Assume use of -webkit- if unprefixed and -ms- are not supported.
        // https://caniuse.com/#feat=transforms2d
        var d = document.createElement("div");
        var msPrefix = d.style.msTransform !== undefined;
        var noPrefix = d.style.transform !== undefined;
        parsed.transformRule = noPrefix ? "transform" : msPrefix ? "msTransform" : "webkitTransform";
        // Pips don't move, so we can place them using left/top.
        var styles = [
            ["left", "top"],

View on GitHub (pinned to 7edb57986f)

Solutions

  1. Add start: [value] (array) or start: value to the options, e.g. noUiSlider.create(el, {start: [50], range: {min: 0, max: 100}})
  2. If options are dynamic, default the key before calling create: options.start = options.start || [0]
  3. Check the noUiSlider documentation for the current required set (start and range are the two mandatory options)

Example fix

// before
noUiSlider.create(el, { range: { min: 0, max: 100 } });

// after
noUiSlider.create(el, { start: [50], range: { min: 0, max: 100 } });
Defensive patterns

Strategy: validation

Validate before calling

if (!Array.isArray(options.start) && !Number.isFinite(options.start)) {
  throw new TypeError("slider options must include start");
}
noUiSlider.create(el, options);

Type guard

function isSliderOptions(o) {
  return !!o && (Array.isArray(o.start) ? o.start.length > 0 : Number.isFinite(o.start)) && !!o.range;
}

Prevention

When it happens

Trigger: noUiSlider.create(el, {}) with no start, or create(el, {range: {min: 0, max: 100}}) where only range was supplied. Also happens when options come from a variable that is undefined or built by a function that conditionally omits start.

Common situations: Slider configuration assembled from dynamic data (user settings, JSON) where start is omitted; refactoring that renames or drops the start key; upgrading from very old noUiSlider versions where option names differed. PgHero's own dashboard always passes start, so this only bites custom code using the vendored library.

Related errors


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