repository·master·Indexed 26 days ago
https://github.com/leongersen/nouisliderA lightweight, high-performance, and dependency-free JavaScript range slider library. It features GPU animations, full responsiveness, multi-touch support, and accessibility via ARIA attributes and keyboard interaction. The library provides a comprehensive API for controlling handle positions, implementing custom formatters, configuring visual pips, and managing slider events.
To view and contribute to the noUiSlider documentation, you can run a local development server using PHP's built-in web server. This requires PHP to be installed on your system.
nouislider directory.git clone https://github.com/leongersen/noUiSlider nouislidernpm run docshttp://localhost:8080/nouislider/.To run the server on a different port, set the PORT environment variable:
PORT=8086 npm run docsIf you prefer not to use the npm shorthand, you can start the server directly from your root directory (e.g., C:/Web) using PHP:
php -S localhost:8080 nouislider/documentation/_run/router.phpThe documentation uses the files from the dist folder. To see changes you have made to the main source reflected in the documentation, you must run npm run build before viewing the docs.
npm run docsTo create a new slider, use the create function (also exported as initialize). Pass the target DOM element and an options object. The function returns an API object used to interact with the slider.
Note: The target element must be a single valid DOM element and must not have been previously initialized with noUiSlider.
Pips allow you to display visual markers (ticks) along the slider. You can choose different modes to control how they are distributed:
PipsMode.Range: Spaced according to the range.PipsMode.Steps: Spaced according to the step value.PipsMode.Positions: Placed at specific numeric values.PipsMode.Count: A fixed number of pips.PipsMode.Values: Placed at specific numeric values (similar to Positions).noUiSlider supports keyboard interaction and ARIA attributes for accessibility.
keyboardSupport: A boolean that enables or disables keyboard interaction (defaults to true). When enabled, handles are focusable via tabindex="0" and respond to keyboard events.handleAttributes: An object that allows you to attach custom HTML attributes to specific handles. The keys should be the handle index (0-based).ariaFormat: A formatter used to define the aria-valuetext attribute for screen readers. If not provided, it defaults to the same formatter used for the standard format option.Options object. The range property is required and defines the scale of the slider. Other properties like start, step, orientation, and connect allow you to customize behavior and appearance.You can customize the CSS classes used by noUiSlider to match your project's styling.
cssPrefix: A string used as a prefix for all generated classes (defaults to noUi-). Setting this to false disables prefixing.cssClasses: An object allowing you to override specific class names for slider components (e.g., target, base, handle, origin, connect, tooltip, pips, etc.).If you provide a cssPrefix, the library will automatically prepend it to any class names provided in the cssClasses object.
cssClasses object in the options. This is useful when integrating with existing CSS frameworks or custom styling.Display formatted values via tooltips or standard formatting:
format: A formatter used to convert raw slider values into human-readable strings for display.tooltips: An option to enable tooltips. It can be a boolean (to enable for all handles) or an array/object specifying a formatter for each specific handle.pips: An option to add visual markers (pips) along the slider track. Supports several modes:PipsMode.Range: Uses the slider's range.PipsMode.Steps: Uses defined steps.PipsMode.Count: Divides the range into a specific number of parts.PipsMode.Positions: Uses specific percentage positions.PipsMode.Values: Uses specific slider values.Control the physical layout and interaction model of the slider using these options:
direction: Sets the text direction (ltr or rtl).orientation: Sets the slider orientation (horizontal or vertical).behaviour: Defines the interaction type (e.g., tap).connect: An array of booleans (e.g., [false, true, true]) that determines which segments of the slider track are 'connected' (colored) between handles.animate: A boolean to enable/disable smooth transitions (defaults to true).animationDuration: The duration of animations in milliseconds (defaults to 300).API interface provides the primary methods for interacting with a noUiSlider instance after initialization. You can use these methods to control handle positions, listen to events, update configuration, and retrieve current values.