What causes "noUiSlider: 'padding' option must be numeric." in Dogfalo/materialize?

Dogfalo/materialize · error · Error

noUiSlider: 'padding' option must be numeric.

Error message

noUiSlider: 'padding' option must be numeric.

What it means

Thrown by testPadding when 'padding' fails isNumeric. padding reserves a non-selectable zone at each end of the slider and must be a real finite number; strings, null, and percentage-suffixed values are rejected.

Source

Thrown at extras/noUiSlider/nouislider.js:627

    }

    function testLimit ( parsed, entry ) {

        if ( !isNumeric(entry) ){
            throw new Error("noUiSlider: 'limit' option must be numeric.");
        }

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

        if ( !parsed.limit || parsed.handles < 2 ) {
            throw new Error("noUiSlider: 'limit' option is only supported on linear sliders with 2 or more handles.");
        }
    }

    function testPadding ( parsed, entry ) {

        if ( !isNumeric(entry) ){
            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.");

View on GitHub (pinned to 824e78248b)

Solutions

Pass a number: padding: 10.
Coerce with Number(raw) after an isFinite check (strip any '%' first).
Use 0 or omit padding to disable.

Example fix

// before
padding: "10"
// after
padding: 10

Defensive patterns

Strategy: validation

Validate before calling

if (opts.padding != null) {
  const raw = typeof opts.padding === 'string' ? parseFloat(opts.padding) : opts.padding;
  if (typeof raw !== 'number' || !Number.isFinite(raw)) throw new TypeError('padding must be a number');
  opts.padding = raw;
}

Type guard

function isPadding(v) { return typeof v === 'number' && Number.isFinite(v); }

Try / catch

try { noUiSlider.create(el, opts); }
catch (e) { if (/padding' option must be numeric/.test(e.message)) { opts.padding = parseFloat(opts.padding); /* retry */ } else throw e; }

Prevention

Strip '%' suffixes and parseFloat percentage strings at the boundary.
Use 0 (or omit) to disable padding instead of null.
Type padding as number in your config interface.

When it happens

Trigger: padding: '10', padding: null, padding: '10%', padding: NaN.

Common situations: String from a DOM attribute, a percentage string from the UI layer, or null used to mean 'no padding'.

Related errors

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