Dogfalo/materialize · error · Error

noUiSlider: 'direction' option was not recognized.

Error message

noUiSlider: 'direction' option was not recognized.

What it means

noUiSlider only accepts two values for the 'direction' option. The testDirection switch handles 'ltr' (dir=0) and 'rtl' (dir=1) and throws on anything else, including typos, casing differences, or non-string values.

Source

Thrown at extras/noUiSlider/nouislider.js:662

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

    function testBehaviour ( parsed, entry ) {

        // Make sure the input is a string.
        if ( typeof entry !== 'string' ) {
            throw new Error("noUiSlider: 'behaviour' must be a string containing options.");
        }

        // Check if the string contains any keywords.
        // None are required.
        var tap = entry.indexOf('tap') >= 0;
        var drag = entry.indexOf('drag') >= 0;
        var fixed = entry.indexOf('fixed') >= 0;
        var snap = entry.indexOf('snap') >= 0;
        var hover = entry.indexOf('hover') >= 0;

View on GitHub (pinned to 824e78248b)

Solutions

1. Set direction to exactly 'ltr' or 'rtl' (lowercase, no whitespace).
2. Trim and lowercase the value if it comes from user input or config: direction: String(raw).trim().toLowerCase().
3. Omit the option entirely to accept the default ('ltr').

Example fix

// before
noUiSlider.create(el, { start: 0, range: {min:0,max:100}, direction: 'RTL' });
// after
noUiSlider.create(el, { start: 0, range: {min:0,max:100}, direction: 'rtl' });

const ALLOWED = new Set(['ltr', 'rtl']);
function normalizeDirection(raw) {
  const v = String(raw).trim().toLowerCase();
  if (!ALLOWED.has(v)) throw new TypeError(`direction must be 'ltr' or 'rtl', got ${raw}`);
  return v;
}

function isValidDirection(v) {
  return v === 'ltr' || v === 'rtl';
}

When it happens

Trigger: Call noUiSlider.create() with options.direction set to anything other than exactly the strings 'ltr' or 'rtl' (e.g. 'LTR', 'horizontal', 'right', 'rtl ' with trailing space, or a non-string like true).

Common situations: Case mismatch ('LTR'), localized config sources that translate the value, copy-paste from CSS direction properties ('rtl' vs 'row-rtl'), trailing whitespace from template literals or JSON with spaces, or passing a boolean/number instead of a string.

Related errors

• noUiSlider: 'padding' option must be less than half the rang
• 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/103ab8d30fab6e9a. Report an issue: GitHub.