Tool Cool Range Slider
Any Number of Pointers
The library supports any number of pointers (knobs/handles): one-pointer range slider, two-pointers range slider, or as many as you need.
Responsive and mobile-ready range slider that looks good on any devices
It accessible via ARIA-attributes
Range slider library has a standalone Marks Plugin. This allows to generate points along the slider:
The library is built with Typescript and does not use external dependencies
The library has additional theme plugins with a ready-made set of styles such as gradients, glass, pointer shapes and more. It's also possible to develop your own theme as an external plugin.
Styles & Design
The library has multiple options for customizing
Images and SVGs can be used as pointers.
Direction & Orientation
The library supports horizontal and vertical orientation
Numbers, Text, or Range
The slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both text
Local & Session Storage
Moving Tooltip Plugin
Range slider library has a standalone Moving Tooltip Plugin. The plugin adds a moving tooltip to each pointer. You can change the tooltip color, size, and distance to pointer.
The library also supports range dragging:
Origin at Center
The library also has an Origin at Center Plugin. This plugin makes the origin of the pointer always in the center.
- Based on web component technologies.
- Allows programmatic attribute changes
- Simple dynamic rendering after ajax requests or delays.
- Disabled/enabled range slider (including API).
- Possibility to disable only one pointer.
Non-linear range slider
- Optional animation on panel click.
- Works well with Bootstrap and other CSS frameworks
- No CSS conflicts due to web components.
- Automatically generated labels as a standalone plugin.
- Any number of sliders on one page.
- Supports two (and more) pointers overlap, pointers max and min distance.
- The functionality of the library can be extended using plugins.
- The range slide can be used in React and other frameworks.
- Extensive API based on TypeScript.
- Binding Labels Plugin
- Auto Generated Labels Plugin
- Moving Tooltip Plugin
- Storage Plugin
- Pointer Shapes CSS Plugin
- Themes CSS Plugin
- Origin at Center Plugin
- Marks Plugin
It can be used for free in any personal or commercial project
- ミ☆ mzParticles ☆彡 - TypeScript library for creating particle effects.
- mzMath - a collection of typescript-based math helpers.
- mzSVG - TypeScript-based library for managing SVG in the browser and Node.js.
- React Input Number - React component that provides a user-friendly interface for entering numerical values.
- Stripes Maker - Node.js stripe pattern generator and maker.
- mzCanvas - The TypeScript-based library for manipulating <canvas> element and 2D graphics in the browser.
- Tool Cool Color Picker - color picker library written in typescript and using web component technologies.