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
- Add start: [value] (array) or start: value to the options, e.g. noUiSlider.create(el, {start: [50], range: {min: 0, max: 100}})
- If options are dynamic, default the key before calling create: options.start = options.start || [0]
- 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
- Always write start and range together when composing slider options
- Default dynamic options before create: options.start ||= [0]
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
- noUiSlider: 'cssClasses' must be an object.
- noUiSlider: 'values' (>= 2) required for mode 'count'.
- noUiSlider: invalid handle number, got: {handleNumber}
- noUiSlider: create requires a single element, got: {target}
- noUiSlider: Slider was already initialized.
AI-assisted analysis of ankane/pghero@7edb57986f (2026-08-21).
Data as JSON: /api/errors/389a1ae1920cf6e4.
Report an issue: GitHub.