Dogfalo/materialize · error · Error

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

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.

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)

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: '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.
• noUiSlider: 'tooltips' must be passed a formatter or 'false'

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