toolcool-range-slider
Advanced tools
Readme
Responsive range slider library written in typescript and using web component technologies. Pure JavaScript without additional dependencies. It has a rich set of settings, including any number of pointers (knobs), vertical and horizontal slider, touch, mousewheel and keyboard support, local and session storage, range dragging, and RTL support. The functionality of the library can be extended using plugins.
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 :iphone:. It supports touch, mousewheel events, and keyboard.
It accessible via ARIA-attributes :shield:
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 :unlock:. The core is 28KB minified or 9KB compressed (GZip).
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.
The library has multiple options for customizing :wrench: the appearance of the slider. Width, height, border radius, colors, hover and focus, and other properties can be customized using the slider attributes.
Images and SVGs can be used as pointers.
The library supports horizontal and vertical orientation :globe_with_meridians:. It also supports left to right and right to left directions for a horizontal slider, and top to bottom and bottom to top for vertical sliders.
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 :writing_hand: and numeric data are supported.
Local storage :floppy_disk: and session storage support as a standalone plugin. The user selection will be saved and restored after page refresh or navigation from other pages.
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:
The library also has an Origin at Center Plugin. This plugin makes the origin of the pointer always in the center.
It can be used for free in any personal or commercial project :gift:
FAQs
Responsive range slider library written in typescript and using web component technologies. Pure JavaScript without additional dependencies. It has a rich set of settings, including one and two pointers, a vertical slider, touch, mousewheel and keyboard s
The npm package toolcool-range-slider receives a total of 843 weekly downloads. As such, toolcool-range-slider popularity was classified as not popular.
We found that toolcool-range-slider demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
