Toolcool Range Slider
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Nouislider | 5,384 |  | 1,399 | 307 | 2 months ago | 53 | August 12, 2022 | 29 | mit | TypeScript |
| noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies. | ||||||||||
| Ion.rangeslider | 2,532 | 2 days ago | 131 | mit | JavaScript | |||||
| jQuery only range slider | ||||||||||
| Flutter_app | 2,417 | 5 days ago | 9 | apache-2.0 | Dart | |||||
| 🔥🔥🔥本项目包括各种基本控件使用（Text、TextField、Icon、Image、Listview、Gridview、Picker、Stepper、Dialog、Slider、Row、Appbar、Sizebox、BottomSheet、Chip、Dismissible、FlutterLogo、Check、Switch、TabBar、BottomNavigationBar、Sliver等）、豆瓣电影、tubitv、每日一文、和天气、百姓生活、随机诗词、联系人、句子迷、好奇心日报、有道精品课、高德定位、音乐播放器🎵、追书神器等板块 | ||||||||||
| Vue Slider Component | 2,292 |  | 394 | 223 | 4 months ago | 195 | July 28, 2022 | 24 | mit | TypeScript |
| 🌡 A highly customized slider component | ||||||||||
| Rangeslider.js | 2,162 |  | 131 | 14 | 6 months ago | 26 | October 06, 2019 | 74 | mit | JavaScript |
| 🎚 HTML5 input range slider element polyfill | ||||||||||
| Angularjs Slider | 1,235 |  | 154 | 23 | 8 months ago | 76 | May 26, 2022 | 19 | mit | JavaScript |
| Slider directive for AngularJS 1.X. No dependencies and mobile friendly. | ||||||||||
| React Slider | 776 |  | 319 | 97 | 4 months ago | 47 | May 16, 2022 | 11 | mit | JavaScript |
| Accessible, CSS agnostic, slider component for React. | ||||||||||
| Nmrangeslider | 731 | 31 | 3 years ago | 3 | March 24, 2015 | 42 | mit | Objective-C | ||
| A custom range slider for iOS | ||||||||||
| React Input Range | 705 |  | 601 | 124 | a year ago | 33 | January 06, 2018 | 125 | mit | JavaScript |
| React component for inputting numeric values within a range (range slider) | ||||||||||
| React Rangeslider | 620 |  | 390 | 111 | 6 months ago | 16 | September 19, 2017 | 92 | mit | JavaScript |
| A lightweight responsive react range slider component.A fast & lightweight react component as a drop in replacement for HTML5 input range slider element. | ||||||||||
Tool Cool Range Slider
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.
Links
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.
Mobile Ready
Responsive and mobile-ready range slider that looks good on any devices 📱. It supports touch, mousewheel events, and keyboard.
Accessibility
It accessible via ARIA-attributes 🛡
Marks Plugin
Range slider library has a standalone Marks Plugin. This allows to generate points along the slider:
ES6 JavaScript & Typescript
The library is built with Typescript and does not use external dependencies 🔓. The core is 28KB minified or 9KB compressed (GZip).
Themes 🎨
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 🔧 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.
Direction & Orientation
The library supports horizontal and vertical orientation 🌐. 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.
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 ✍️ and numeric data are supported.
Local & Session Storage
Local storage 💾 and session storage support as a standalone plugin. The user selection will be saved and restored after page refresh or navigation from other pages.
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.
Range Dragging
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.
Other Features
- 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.
Plugins
- 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
License
It can be used for free in any personal or commercial project 🎁
