CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nouislider

Lightweight JavaScript range slider with no dependencies

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

slider-creation.mddocs/

Slider Creation

Core functionality for creating and initializing slider instances on DOM elements with comprehensive configuration options.

Capabilities

noUiSlider.create()

Creates a new slider instance on the specified DOM element.

/**
 * Creates a new slider instance on the target element
 * @param target - DOM element to convert to slider
 * @param options - Configuration options for the slider
 * @returns Slider API object with methods and properties
 * @throws Error if target is invalid or already initialized
 */
noUiSlider.create(target: HTMLElement, options: SliderOptions): SliderAPI;

Usage Examples:

import noUiSlider from "nouislider";

// Basic single-handle slider
const singleSlider = document.getElementById('single-slider');
noUiSlider.create(singleSlider, {
    start: 50,
    range: {
        'min': 0,
        'max': 100
    }
});

// Dual-handle range slider
const rangeSlider = document.getElementById('range-slider');
noUiSlider.create(rangeSlider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

// Advanced slider with stepping and formatting
const advancedSlider = document.getElementById('advanced-slider');
noUiSlider.create(advancedSlider, {
    start: [1000, 3000],
    connect: true,
    step: 100,
    range: {
        'min': 0,
        'max': 5000
    },
    format: {
        to: function(value) {
            return '$' + Math.round(value);
        },
        from: function(value) {
            return Number(value.replace('$', ''));
        }
    }
});

Configuration Options

Required Options

start

Initial value(s) for the slider handles.

start: number | number[];
  • Single value: start: 50
  • Multiple values: start: [20, 80]

range

Defines the minimum and maximum values, with optional stepping.

range: RangeConfig;

interface RangeConfig {
    min: number | [number, number];  // Minimum value, optionally with step
    max: number | [number, number];  // Maximum value, optionally with step
    [position: string]: number | [number, number];  // Intermediate positions
}

Examples:

// Basic linear range
range: {
    'min': 0,
    'max': 100
}

// Range with stepping
range: {
    'min': [0, 10],      // Min value 0, step size 10
    '50%': [500, 50],    // At 50% position, value 500, step size 50
    'max': 1000
}

// Non-linear range
range: {
    'min': 0,
    '10%': 50,
    '50%': 500,
    'max': 2000
}

Connection Options

connect

Controls visual connection between handles.

connect?: boolean | string | boolean[];
  • false: No connections
  • true: Connect all handles
  • 'lower': Connect from start to first handle
  • 'upper': Connect from last handle to end
  • Array: [false, true, false] - Connect specific segments

Layout Options

direction

Text direction affecting slider orientation.

direction?: 'ltr' | 'rtl';  // Default: 'ltr'

orientation

Physical orientation of the slider.

orientation?: 'horizontal' | 'vertical';  // Default: 'horizontal'

Interaction Options

behaviour

Defines interaction behaviors as space-separated string.

behaviour?: string;  // Default: 'tap'

Available behaviors:

  • 'tap': Click to move handles
  • 'drag': Drag handles and ranges
  • 'fixed': Fixed distance between handles
  • 'snap': Snap to step values
  • 'hover': Fire hover events
  • 'unconstrained': Allow handles to cross

Examples:

behaviour: 'tap'                    // Click only
behaviour: 'tap-drag'              // Click and drag
behaviour: 'tap-drag-fixed'        // Fixed distance dragging
behaviour: 'unconstrained-tap'     // Handles can cross

Value Constraints

step

Step size for value increments.

step?: number;

margin

Minimum distance between handles.

margin?: number;

limit

Maximum distance between handles.

limit?: number;

padding

Padding from slider edges.

padding?: number | number[];  // Single value or [start, end]

snap

Force values to snap to steps.

snap?: boolean;  // Default: false

Animation Options

animate

Enable smooth animations.

animate?: boolean;  // Default: true

animationDuration

Animation duration in milliseconds.

animationDuration?: number;  // Default: 300

Formatting Options

format

Value formatting for display.

format?: Formatter;

interface Formatter {
    to(value: number): string;    // Format for display
    from(value: string): number;  // Parse from string
}

ariaFormat

Accessibility formatting (defaults to format if not provided).

ariaFormat?: Formatter;

Example:

format: {
    to: function(value) {
        return value.toFixed(2) + '%';
    },
    from: function(value) {
        return parseFloat(value.replace('%', ''));
    }
}

UI Enhancement Options

tooltips

Enable and configure tooltips.

tooltips?: boolean | Formatter | (boolean | Formatter)[];
  • true: Enable default tooltips
  • false: Disable tooltips
  • Formatter: Custom tooltip formatting
  • Array: Per-handle configuration

pips

Scale markers configuration.

pips?: PipsConfig;

interface PipsConfig {
    mode: 'range' | 'steps' | 'positions' | 'count' | 'values';
    values?: number[];
    stepped?: boolean;
    density?: number;
    filter?: (value: number, type: number) => number;
    format?: Formatter;
}

Accessibility Options

keyboardSupport

Enable keyboard navigation.

keyboardSupport?: boolean;  // Default: true

keyboardPageMultiplier

Multiplier for page up/down keys.

keyboardPageMultiplier?: number;  // Default: 5

keyboardDefaultStep

Default step percentage for keyboard navigation.

keyboardDefaultStep?: number;  // Default: 10

Styling Options

cssPrefix

CSS class prefix for all elements.

cssPrefix?: string | false;  // Default: 'noUi-'

cssClasses

Custom CSS class names.

cssClasses?: CSSClasses;

documentElement

Custom document element for event handling.

documentElement?: HTMLElement;

Slider Lifecycle Management

destroy()

Removes all slider functionality and cleans up DOM elements.

/**
 * Destroy the slider instance and clean up
 * @returns void
 */
slider.noUiSlider.destroy(): void;

Usage Examples:

// Clean up slider before removing element
const slider = document.getElementById('my-slider');
noUiSlider.create(slider, options);

// Later, when no longer needed
slider.noUiSlider.destroy();

// Now the element can be safely removed or reused
slider.remove();

// Or create a new slider on the same element
noUiSlider.create(slider, newOptions);

What destroy() does:

  • Removes all event listeners
  • Cleans up DOM structure created by noUiSlider
  • Removes the noUiSlider property from the target element
  • Frees up memory used by the slider instance

Error Handling

The create method throws errors for invalid configurations:

// Invalid target
noUiSlider.create(null, options);  // Error: create requires a single element

// Already initialized
noUiSlider.create(element, options);  // First call succeeds
noUiSlider.create(element, options);  // Error: Slider was already initialized

// Invalid range
noUiSlider.create(element, {
    start: 50,
    range: { min: 100, max: 0 }  // Error: Invalid range configuration
});

Browser Support

  • All modern browsers
  • Internet Explorer > 9
  • Touch devices (iOS, Android, Windows)
  • Keyboard navigation support
  • Screen reader compatibility

Install with Tessl CLI

npx tessl i tessl/npm-nouislider

docs

configuration-updates.md

event-handling.md

index.md

slider-creation.md

ui-enhancements.md

value-management.md

tile.json