or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-updates.mdevent-handling.mdindex.mdslider-creation.mdui-enhancements.mdvalue-management.md
tile.json

tessl/npm-nouislider

Lightweight JavaScript range slider with no dependencies

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/nouislider@14.7.x

To install, run

npx @tessl/cli install tessl/npm-nouislider@14.7.0

index.mddocs/

noUiSlider

noUiSlider is a lightweight JavaScript range slider library with no dependencies. It provides highly customizable, accessible, and touch-enabled slider controls for web applications with support for single values, ranges, stepped values, and custom formatting.

Package Information

  • Package Name: nouislider
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install nouislider

Core Imports

ES6 modules:

import noUiSlider from "nouislider";
import "nouislider/distribute/nouislider.min.css";

CommonJS:

const noUiSlider = require("nouislider");
// CSS must be included separately in HTML: <link rel="stylesheet" href="node_modules/nouislider/distribute/nouislider.min.css">

Browser globals:

<link rel="stylesheet" href="path/to/nouislider.css">
<script src="path/to/nouislider.js"></script>
<!-- noUiSlider is available as global variable -->

Basic Usage

import noUiSlider from "nouislider";

// Get a reference to a DOM element
const slider = document.getElementById('slider');

// Create a slider with basic configuration
noUiSlider.create(slider, {
    start: [20, 80],              // Initial values
    connect: true,                // Connect the handles with a colored bar
    range: {                      // Value range
        'min': 0,
        'max': 100
    }
});

// Get current values
const values = slider.noUiSlider.get();
console.log(values); // ['20.00', '80.00']

// Set new values
slider.noUiSlider.set([30, 70]);

// Listen for changes
slider.noUiSlider.on('update', function (values, handle) {
    console.log('Handle', handle, 'updated to:', values[handle]);
});

Architecture

noUiSlider is built around several key components:

  • Core Factory: The noUiSlider.create() method that initializes sliders on DOM elements
  • Slider Instance API: Methods and properties available on created slider instances
  • Range System: Flexible value ranges with support for linear and non-linear scales
  • Event System: Comprehensive event handling for user interactions and programmatic changes
  • Styling System: CSS-based theming with customizable class names and structure
  • Accessibility: Full ARIA support and keyboard navigation

Capabilities

Slider Creation

Core functionality for creating and initializing slider instances on DOM elements.

noUiSlider.create(target: HTMLElement, options: SliderOptions): SliderAPI;

interface SliderOptions {
    start: number | number[];
    range: RangeConfig;
    connect?: boolean | string | boolean[];
    direction?: 'ltr' | 'rtl';
    orientation?: 'horizontal' | 'vertical';
    behaviour?: string;
    step?: number;
    margin?: number;
    limit?: number;
    padding?: number | number[];
    snap?: boolean;
    animate?: boolean;
    animationDuration?: number;
    format?: Formatter;
    ariaFormat?: Formatter;
    tooltips?: boolean | Formatter | (boolean | Formatter)[];
    pips?: PipsConfig;
    keyboardSupport?: boolean;
    keyboardPageMultiplier?: number;
    keyboardDefaultStep?: number;
    cssPrefix?: string | false;
    cssClasses?: CSSClasses;
    documentElement?: HTMLElement;
}

Slider Creation

Value Management

Methods for getting and setting slider values programmatically.

// Get current values
slider.noUiSlider.get(): string | string[];

// Set all values
slider.noUiSlider.set(values: number | number[], fireSetEvent?: boolean, exactInput?: boolean): void;

// Set specific handle value  
slider.noUiSlider.setHandle(handleNumber: number, value: number, fireSetEvent?: boolean, exactInput?: boolean): void;

// Reset to initial values
slider.noUiSlider.reset(fireSetEvent?: boolean): void;

Value Management

Event Handling

Comprehensive event system for responding to slider interactions and value changes.

// Bind event listener
slider.noUiSlider.on(eventName: string, callback: EventCallback): void;

// Remove event listener
slider.noUiSlider.off(eventName: string): void;

type EventCallback = (
    values: string[],
    handle: number,
    unencoded: number[],
    tap?: boolean,
    positions?: number[],
    slider?: SliderAPI
) => void;

Event Handling

Configuration Updates

Runtime configuration updates and slider reconfiguration.

slider.noUiSlider.updateOptions(
    optionsToUpdate: Partial<SliderOptions>, 
    fireSetEvent?: boolean
): void;

// Get current configuration
slider.noUiSlider.options: SliderOptions;

Configuration Updates

UI Enhancements

Additional UI features including tooltips, scale markers (pips), and styling customization.

// Pips (scale markers)
slider.noUiSlider.pips(config: PipsConfig): HTMLElement;
slider.noUiSlider.removePips(): void;

// Tooltips
slider.noUiSlider.removeTooltips(): void;
slider.noUiSlider.getTooltips(): HTMLElement[];

// Handle elements
slider.noUiSlider.getOrigins(): HTMLElement[];

UI Enhancements

Types

interface RangeConfig {
    min: number | [number, number];
    max: number | [number, number];
    [position: string]: number | [number, number];
}

interface Formatter {
    to(value: number): string;
    from(value: string): number;
}

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

interface CSSClasses {
    target?: string;
    base?: string;
    origin?: string;
    handle?: string;
    handleLower?: string;
    handleUpper?: string;
    touchArea?: string;
    horizontal?: string;
    vertical?: string;
    background?: string;
    connect?: string;
    connects?: string;
    ltr?: string;
    rtl?: string;
    textDirectionLtr?: string;
    textDirectionRtl?: string;
    draggable?: string;
    drag?: string;
    tap?: string;
    active?: string;
    tooltip?: string;
    pips?: string;
    pipsHorizontal?: string;
    pipsVertical?: string;
    marker?: string;
    markerHorizontal?: string;
    markerVertical?: string;
    markerNormal?: string;
    markerLarge?: string;
    markerSub?: string;
    value?: string;
    valueHorizontal?: string;
    valueVertical?: string;
    valueNormal?: string;
    valueLarge?: string;
    valueSub?: string;
}

interface SliderAPI {
    destroy(): void;
    steps(): [number | null, number | null][];
    on(event: string, callback: EventCallback): void;
    off(event: string): void;
    get(): string | string[];
    set(values: number | number[], fireSetEvent?: boolean, exactInput?: boolean): void;
    setHandle(handleNumber: number, value: number, fireSetEvent?: boolean, exactInput?: boolean): void;
    reset(fireSetEvent?: boolean): void;
    updateOptions(optionsToUpdate: Partial<SliderOptions>, fireSetEvent?: boolean): void;
    target: HTMLElement;
    options: SliderOptions;
    removePips(): void;
    removeTooltips(): void;
    getTooltips(): HTMLElement[];
    getOrigins(): HTMLElement[];
    pips(config: PipsConfig): HTMLElement;
}