https://github.com/taufik-nurrohman/range-slider
The simplest JavaScript custom range slider ever!
https://github.com/taufik-nurrohman/range-slider
custom javascript js range simple slider touch
Last synced: about 2 months ago
JSON representation
The simplest JavaScript custom range slider ever!
- Host: GitHub
- URL: https://github.com/taufik-nurrohman/range-slider
- Owner: taufik-nurrohman
- License: mit
- Created: 2014-04-01T04:30:03.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-10-04T05:20:31.000Z (over 4 years ago)
- Last Synced: 2025-04-24T02:09:31.337Z (about 2 months ago)
- Topics: custom, javascript, js, range, simple, slider, touch
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 44
- Watchers: 4
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Simple Custom Range Slider
==========================
> The simplest JavaScript custom range slider ever!
[](https://taufik-nurrohman.github.io/range-slider/range-slider.html "View Demo")
Basic Usage
-----------
The required HTML is:
~~~ .html
~~~
Execution…
### Basic
~~~ .js
// horizontal slider
RS(document.getElementById('range-slider-1'), function(value, target, event) {
console.log(value);
});
// vertical slider
RS(document.getElementById('range-slider-1'), function(value, target, event) {
console.log(value);
}, true);
~~~
### Advance
~~~ .js
RS(document.getElementById('range-slider-1'), {
value: 1, // initial value
vertical: false, // vertical or horizontal slider?
create: function(value, target) { … }, // create event
start: function(value, target, event) { … }, // start event
drag: function(value, target, event) { … }, // drag event
stop: function(value, target, event) { … } // stop event
});
~~~
Examples
--------
- [No Idea?](https://taufik-nurrohman.github.io/range-slider/range-slider.noob.html)
- [Custom Classes](https://taufik-nurrohman.github.io/range-slider/range-slider.custom.html)
- [Fallback to HTML5 `` if JavaScript is Disabled](https://taufik-nurrohman.github.io/range-slider/range-slider.replace.html)
- [Custom `min` and `max` Value in Range Slider as Pixel](https://taufik-nurrohman.github.io/range-slider/range-slider.custom-range.html)
- [Tooltip](https://taufik-nurrohman.github.io/range-slider/range-slider.tip.html)
Folks
-----
> **Update 2016/07/21:** Is now has support for touch devices by default.
- Added support for touch devices by @beard86 → [link](https://github.com/beard86/simple-custom-range-slider)