Dogfalo/materialize · error · Error

noUiSlider: 'padding' option must be less than half the…

Error message

noUiSlider: 'padding' option must be less than half the range.

What it means

noUiSlider rejects the 'padding' option when it consumes half or more of the slider range. Padding is converted to a percentage of (max - min) via Spectrum.getMargin -> fromPercentage, and if that percentage is >= 50 the slider can no longer function because the two padded zones would overlap. The library caps padding strictly below the midpoint of the range.

Solutions

1. Reduce padding to strictly less than half of (range.max - range.min), e.g. for range 0-100 use padding <= 49.
2. If you actually want a large dead zone, widen the range so padding is < 50% of it.
3. Re-read padding as an absolute value in range units (not a percentage) before retrying.

Example fix

// before
noUiSlider.create(el, { start: 50, range: { min: 0, max: 100 }, padding: 50 });
// after
noUiSlider.create(el, { start: 50, range: { min: 0, max: 100 }, padding: 20 });

function assertPadding(opts) {
  if (opts.padding == null || opts.padding === 0) return;
  const span = opts.range.max - opts.range.min;
  if (Math.abs(opts.padding) >= span / 2) {
    throw new RangeError(`padding ${opts.padding} must be < half the range span (${span/2})`);
  }
}

function isValidPadding(opts) {
  const span = opts.range.max - opts.range.min;
  return typeof opts.padding === 'number' && opts.padding >= 0 && opts.padding < span / 2;
}

When it happens

Trigger: Call noUiSlider.create() with options.padding set to a number whose value is at least half of (range.max - range.min), e.g. range {min:0,max:100} and padding 50, or range {min:0,max:10} and padding 5. Also triggered by an entry of 0 bypassed earlier but a large positive value passing getMargin.

Common situations: Developers confuse absolute units with percentages (passing 50 thinking it means 50% rather than 50 units), copy a padding value from a slider with a different range, or increase padding while narrowing the range. Hitting this after refactoring a range from a wide span to a small one is common.

Related errors

• noUiSlider: 'behaviour' must be a string containing options.
• noUiSlider: 'cssClasses' must be an object.
• noUiSlider: 'cssPrefix' must be a string or `false`.
• noUiSlider: 'direction' option was not recognized.
• noUiSlider: 'fixed' behaviour must be used with 2 handles

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

Appendix: source

Thrown at extras/noUiSlider/nouislider.js:645

            throw new Error("noUiSlider: 'padding' option must be numeric.");
        }

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

        parsed.padding = parsed.spectrum.getMargin(entry);

        if ( !parsed.padding ) {
            throw new Error("noUiSlider: 'padding' option is only supported on linear sliders.");
        }

        if ( parsed.padding < 0 ) {
            throw new Error("noUiSlider: 'padding' option must be a positive number.");
        }

        if ( parsed.padding >= 50 ) {
            throw new Error("noUiSlider: 'padding' option must be less than half the range.");
        }
    }

    function testDirection ( parsed, entry ) {

        // Set direction as a numerical value for easy parsing.
        // Invert connection for RTL sliders, so that the proper
        // handles get the connect/background classes.
        switch ( entry ) {
            case 'ltr':
                parsed.dir = 0;
                break;
            case 'rtl':
                parsed.dir = 1;
                break;
            default:
                throw new Error("noUiSlider: 'direction' option was not recognized.");
        }

View on GitHub (pinned to 824e78248b)