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.

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: 'behaviour' must be a string containing options.
• noUiSlider: 'cssClasses' must be an object.
• noUiSlider: 'cssPrefix' must be a string or `false`.
• noUiSlider: 'fixed' behaviour must be used with 2 handles
• noUiSlider: 'format' requires 'to' and 'from' methods.

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

Appendix: 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)