Dogfalo/materialize · error · Error

noUiSlider: 'margin' option is only supported on linear slid

Error message

noUiSlider: 'margin' option is only supported on linear sliders.

What it means

Thrown by testMargin when Spectrum.getMargin returns false. getMargin returns false whenever the spectrum has more than two points (xPct.length !== 2), i.e. the range contains intermediate stops and is therefore non-linear. margin/limit/padding are only computable on a single linear segment, so a stepped scale cannot honor them.

Source

Thrown at extras/noUiSlider/nouislider.js:607

                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.");
        }

        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 ) {

View on GitHub (pinned to 824e78248b)

Solutions

Remove margin when the range has intermediate stops.
Use a purely linear range: { min, max } if you need margin.
Enforce handle separation manually in the change/update event handlers.

Example fix

// before
range: { min: 0, '50%': 50, max: 100 }, margin: 10
// after
range: { min: 0, max: 100 }, margin: 10

Defensive patterns

Strategy: validation

Validate before calling

function isLinearRange(range) { return Object.keys(range).length === 2 && 'min' in range && 'max' in range; }
if (opts.margin != null && !isLinearRange(opts.range)) {
  throw new Error('margin requires a linear range ({ min, max } only)');
}

Try / catch

try { noUiSlider.create(el, opts); }
catch (e) { if (/margin' option is only supported on linear/.test(e.message)) { delete opts.margin; /* retry */ } else throw e; }

Prevention

Keep margin exclusive to linear-range sliders.
When you add an intermediate stop, drop margin/limit/padding.
Enforce handle separation in event handlers for non-linear scales.

When it happens

Trigger: range: { min: 0, '50%': 50, max: 100 } combined with margin: 10. Three spectrum points make getMargin return false.

Common situations: Adding an intermediate stop for a non-linear scale while keeping an existing margin config, or reusing a margin value from a linear slider on a stepped scale.

Related errors

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