GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → taufik-nurrohman → Range Slider

taufik-nurrohman / Range Slider

Licence: mit
The simplest JavaScript custom range slider ever!

Programming Languages

javascript
184084 projects - #8 most used programming language
js
455 projects

Labels

simpleslidercustomtouchrange

Projects that are alternatives of or similar to Range Slider

TimeRangePicker
A customizable, easy-to-use, and functional circular time range picker library for Android. Use this library to mimic Apple's iOS or Samsung's bedtime picker.
Stars: ✭ 266 (+548.78%)
Mutual labels:  slider, range
roundy
Simple react round slider. Supports touch events.
Stars: ✭ 29 (-29.27%)
Mutual labels:  slider, touch
vue-histogram-slider
Range slider with histogram for Vue.js
Stars: ✭ 111 (+170.73%)
Mutual labels:  slider, range
Keen Slider
The HTML touch slider carousel with the most native feeling
Stars: ✭ 3,097 (+7453.66%)
Mutual labels:  slider, touch
React Range
🎚️Range input with a slider. Accessible. Bring your own styles and markup.
Stars: ✭ 545 (+1229.27%)
Mutual labels:  slider, range
Easyiterator
🏃 Iterators made easy! Zero cost abstractions for designing and using C++ iterators.
Stars: ✭ 107 (+160.98%)
Mutual labels:  simple, range
AORangeSlider
AORangeSlider is a custom UISlider with two handlers to pick a minimum and a maximum range.
Stars: ✭ 82 (+100%)
Mutual labels:  slider, range
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+4890.24%)
Mutual labels:  slider, touch
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+887.8%)
Mutual labels:  slider, touch
Android Slidr
Another android slider / seekbar, but different :-)
Stars: ✭ 326 (+695.12%)
Mutual labels:  custom, range
Rangetouch
A super tiny library to make `<input type='range'>` sliders work better on touch devices
Stars: ✭ 224 (+446.34%)
Mutual labels:  slider, range
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+71897.56%)
Mutual labels:  slider, touch
React Slider Kit
react-slider-kit is going to be a comprehensive solution to slider feature in react.
Stars: ✭ 219 (+434.15%)
Mutual labels:  slider, range
Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (+214.63%)
Mutual labels:  simple, slider
Ion.rangeslider
jQuery only range slider
Stars: ✭ 2,494 (+5982.93%)
Mutual labels:  slider, range
range-slider
Customizable slider (range) component for JavaScript with no dependencies
Stars: ✭ 26 (-36.59%)
Mutual labels:  slider, range
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (+185.37%)
Mutual labels:  slider, touch
Rangeseekbar
A beautiful and powerful SeekBar what supports single、 range、steps、vetical、custom（ 一款美观强大的支持单向、双向范围选择、分步、垂直、高度自定义的SeekBar)
Stars: ✭ 2,037 (+4868.29%)
Mutual labels:  slider, range
react-simple-range
🔉 React slider component for inputting a numeric value within a range.
Stars: ✭ 20 (-51.22%)
Mutual labels:  slider, range
React Slider
Accessible, CSS agnostic, slider component for React.
Stars: ✭ 627 (+1429.27%)
Mutual labels:  slider, range
View All Similar Projects ➔

Simple Custom Range Slider

The simplest JavaScript custom range slider ever!

View Demo

Basic Usage

The required HTML is:

<div id="range-slider-1"></div>

Execution…

Basic

// 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

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

Folks

Update 2016/07/21: Is now has support for touch devices by default.

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].