Dogfalo/materialize · error · Error

noUiSlider: 'format' requires 'to' and 'from' methods.

Error message

noUiSlider: 'format' requires 'to' and 'from' methods.

What it means

The 'format' option must be an object implementing BOTH a to(value) method (for display) and a from(value) method (for parsing user input back to a number). noUiSlider uses the pair to round-trip values, so missing either one is a hard failure.

Source

Thrown at extras/noUiSlider/nouislider.js:740

            parsed.tooltips.forEach(function(formatter){
                if ( typeof formatter !== 'boolean' && (typeof formatter !== 'object' || typeof formatter.to !== 'function') ) {
                    throw new Error("noUiSlider: 'tooltips' must be passed a formatter or 'false'.");
                }
            });
        }
    }

    function testFormat ( parsed, entry ) {

        parsed.format = entry;

        // Any object with a to and from method is supported.
        if ( typeof entry.to === 'function' && typeof entry.from === 'function' ) {
            return true;
        }

        throw new Error("noUiSlider: 'format' requires 'to' and 'from' methods.");
    }

    function testCssPrefix ( parsed, entry ) {

        if ( entry !== undefined && typeof entry !== 'string' && entry !== false ) {
            throw new Error("noUiSlider: 'cssPrefix' must be a string or `false`.");
        }

        parsed.cssPrefix = entry;
    }

    function testCssClasses ( parsed, entry ) {

        if ( entry !== undefined && typeof entry !== 'object' ) {
            throw new Error("noUiSlider: 'cssClasses' must be an object.");
        }

        if ( typeof parsed.cssPrefix === 'string' ) {

View on GitHub (pinned to 824e78248b)

Solutions

1. Use wNumb(...) to get an object that exposes both to and from, e.g. format: wNumb({ decimals: 0 }).
2. If writing a custom formatter, implement both methods: { to: v => ..., from: s => ... }.
3. Verify with typeof entry.to === 'function' && typeof entry.from === 'function' before passing.

Example fix

// before
noUiSlider.create(el, { start: 0, range:{min:0,max:100}, format: { decimals: 0 } });
// after
noUiSlider.create(el, { start: 0, range:{min:0,max:100}, format: wNumb({ decimals: 0 }) });

function assertFormat(opts) {
  const f = opts.format;
  if (f && typeof f.to === 'function' && typeof f.from === 'function') return;
  throw new TypeError('format must expose to() and from()');
}

function isFormatter(f) {
  return !!f && typeof f.to === 'function' && typeof f.from === 'function';
}

When it happens

Trigger: Pass options.format as an object that lacks .to or .from, e.g. { to: v => v }, a class instance missing one method, or a plain wNumb config object {decimals:0} instead of wNumb({decimals:0}).

Common situations: Developers pass the wNumb configuration object instead of the wNumb instance, hand-write a formatter with only to: (forgetting from:), or swap in a third-party formatter that only implements one direction.

Related errors

• noUiSlider: 'padding' option must be less than half the rang
• noUiSlider: 'direction' option was not recognized.
• 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.

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