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

Dogfalo/materialize · error · Error

noUiSlider: 'margin' option must be numeric.

Error message

noUiSlider: 'margin' option must be numeric.

What it means

Thrown by testMargin when 'margin' fails isNumeric. margin is the minimum enforced distance between handles and must be a real finite number; numeric strings, null, and unit-suffixed values are rejected (isNumeric checks typeof === 'number').

Source

Thrown at extras/noUiSlider/nouislider.js:596

        // Set orientation to an a numerical value for easy
        // array selection.
        switch ( entry ){
            case 'horizontal':
                parsed.ort = 0;
                break;
            case 'vertical':
                parsed.ort = 1;
                break;
            default:
                throw new Error("noUiSlider: 'orientation' option is invalid.");
        }
    }

    function testMargin ( parsed, entry ) {

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

        // Issue #582
        if ( entry === 0 ) {
            return;
        }

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

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

    function testLimit ( parsed, entry ) {

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

View on GitHub (pinned to 824e78248b)

Solutions

Pass a number: margin: 10.
Coerce strings with Number(raw) after an isFinite check.
Use 0 (or omit margin) to disable the constraint.

Example fix

// before
margin: "20"
// after
margin: 20

Defensive patterns

Strategy: validation

Validate before calling

if (opts.margin != null) {
  const m = Number(opts.margin);
  if (typeof opts.margin !== 'number' || !Number.isFinite(m)) throw new TypeError('margin must be a number');
  opts.margin = m;
}

Type guard

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

Try / catch

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

Prevention

Coerce string sources with Number() before assignment.
Strip unit suffixes at the boundary.
Use 0 (or omit) to disable margin instead of null.

When it happens

Trigger: margin: '10', margin: null, margin: '10px', margin: NaN.

Common situations: String value from a DOM attribute or JSON, a CSS-style value carrying a unit suffix, or null used to mean 'disabled'.

Related errors

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