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
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;
}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;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;Configuration Updates
Runtime configuration updates and slider reconfiguration.
slider.noUiSlider.updateOptions(
optionsToUpdate: Partial<SliderOptions>,
fireSetEvent?: boolean
): void;
// Get current configuration
slider.noUiSlider.options: SliderOptions;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[];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;
}Install with Tessl CLI
npx tessl i tessl/npm-nouislider- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
