Stryzhevskyi / Rangeslider
Licence: mit
Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type="range">` slider element.
Stars: ✭ 161
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to Rangeslider
Angularjs Slider
Slider directive for AngularJS 1.X. No dependencies and mobile friendly.
Stars: ✭ 1,236 (+667.7%)
Mutual labels: range-slider
Router.js
Router.js is a simple and powerful javascript library to handle routing
Stars: ✭ 107 (-33.54%)
Mutual labels: vanilla-javascript
Vidar
An extendable video-editing framework for the browser and Node
Stars: ✭ 132 (-18.01%)
Mutual labels: vanilla-javascript
Float Labels.js
A zero-dependency plugin that applies the float label pattern to a form.
Stars: ✭ 91 (-43.48%)
Mutual labels: vanilla-javascript
Datatable
Javascript Plugin for data tables creation
Stars: ✭ 97 (-39.75%)
Mutual labels: vanilla-javascript
Datepickk
Simple, beautiful and powerful datepicker!
Stars: ✭ 160 (-0.62%)
Mutual labels: vanilla-javascript
Html5sortable
VanillaJS sortable lists and grids using native HTML5 drag and drop API.
Stars: ✭ 1,384 (+759.63%)
Mutual labels: vanilla-javascript
Nipplejs
🎮 A virtual joystick for touch capable interfaces.
Stars: ✭ 1,313 (+715.53%)
Mutual labels: vanilla-javascript
Vanilla Semantic Ui
Semantic UI component framework without jQuery
Stars: ✭ 97 (-39.75%)
Mutual labels: vanilla-javascript
Vanillajs Deck
A Vanilla.js Single Page App (SPA) slide deck for a presentation about Vanilla.js written with no frameworks.
Stars: ✭ 119 (-26.09%)
Mutual labels: vanilla-javascript
Verlyrangeslider
Range sliders with some verlet physics magic.
Stars: ✭ 84 (-47.83%)
Mutual labels: range-slider
Boxedverticalseekbar
A vertical seekbar for Android
Stars: ✭ 133 (-17.39%)
Mutual labels: range-slider
Halkabox.js
A simple and basic Javascript lightbox.
Stars: ✭ 75 (-53.42%)
Mutual labels: vanilla-javascript
Draggable
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package
Stars: ✭ 160 (-0.62%)
Mutual labels: vanilla-javascript
Dev10
🐷 A nifty little app that shows you the top posts on Dev.to in your menubar.
Stars: ✭ 136 (-15.53%)
Mutual labels: vanilla-javascript
Sharer.js
🔛 🔖 Create your own social share buttons. No jquery.
Stars: ✭ 1,624 (+908.7%)
Mutual labels: vanilla-javascript
rangeSlider
Simple, small and fast vanilla JavaScript polyfill for the HTML5
<input type="range">
slider element. Forked from André Ruffert's jQuery plugin
Check out the examples.
- Touchscreen friendly
- Recalculates
onresize
- Small and fast
- Supports all major browsers
- Buffer progressbar (for downloading progress etc.)
Install
Install with npm:
npm install --save rangeslider-pure
Usage
// Initialize a new plugin instance for one element or NodeList of elements.
const slider = document.querySelector('input[type="range"]');
rangeSlider.create(slider, {
polyfill: true, // Boolean, if true, custom markup will be created
root: document,
rangeClass: 'rangeSlider',
disabledClass: 'rangeSlider--disabled',
fillClass: 'rangeSlider__fill',
bufferClass: 'rangeSlider__buffer',
handleClass: 'rangeSlider__handle',
startEvent: ['mousedown', 'touchstart', 'pointerdown'],
moveEvent: ['mousemove', 'touchmove', 'pointermove'],
endEvent: ['mouseup', 'touchend', 'pointerup'],
vertical: false, // Boolean, if true slider will be displayed in vertical orientation
min: null, // Number, 0
max: null, // Number, 100
step: null, // Number, 1
value: null, // Number, center of slider
buffer: null, // Number, in percent, 0 by default
stick: null, // [Number stickTo, Number stickRadius] : use it if handle should stick to ${stickTo}-th value in ${stickRadius}
borderRadius: 10, // Number, if you're using buffer + border-radius in css
onInit: function () {
console.info('onInit')
},
onSlideStart: function (position, value) {
console.info('onSlideStart', 'position: ' + position, 'value: ' + value);
},
onSlide: function (position, value) {
console.log('onSlide', 'position: ' + position, 'value: ' + value);
},
onSlideEnd: function (position, value) {
console.warn('onSlideEnd', 'position: ' + position, 'value: ' + value);
}
});
// update position
const triggerEvents = true; // or false
slider.rangeSlider.update({
min : 0,
max : 20,
step : 0.5,
value : 1.5,
buffer : 70
}, triggerEvents);
<input
type="range"
min="0"
max="100"
step="1"
data-buffer="60" />
Internal APIs:
/*
* @see src/utils/dom.js
*/
RangeSlider.dom;
/*
* @see src/utils/functions.js
*/
RangeSlider.functions;
RangeSlider.version;
Use JSFiddle template for issues
Alternative template on StackBlitz
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].