https://github.com/ninjaprox/segmented-slider-js
A simple slider with three segments
https://github.com/ninjaprox/segmented-slider-js
Last synced: over 1 year ago
JSON representation
A simple slider with three segments
- Host: GitHub
- URL: https://github.com/ninjaprox/segmented-slider-js
- Owner: ninjaprox
- License: mit
- Created: 2015-06-26T21:53:19.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-08T18:16:11.000Z (almost 11 years ago)
- Last Synced: 2025-02-23T20:06:21.834Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 145 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
segmented-slider-js
===================
# Introduction
segmented-slider-js is a simple slider with three segments.
That's all. No more words. Just use it.
# Demo
[Have a look](http://ninjaprox.github.io/demo/segmented-slider-js/)
# Requirements
* jQuery
* jQuery.event.drag
This control uses `jQuery` and `jQuery.event.drag` as dragging stuff helper.
Therefore, make sure these two libraries are imported already.
You can learn more jQuery.event.drag [here](http://threedubmedia.com/code/event/drag)
# Usage
## HTML
Firstly, you need to create a skeleton for this control.
```html
```
`data-init-green` and `data-init-amber` attributes are to set the initial position of the green and amber handle.
Unless they are set, the control itself has default value.
## Javascript
```js
$(".segmented-slider").segmentedSlider(function(greenPoint, amberPoint) {
// Do your stuff with new green point and amber point value here
/* Example
$(".handle.green").text(greenPoint);
$(".handle.amber").text(amberPoint);
*/
});
```
# Todo
* Make it responsive
# License
The MIT License (MIT)
Copyright (c) 2015 Nguyen Vinh [@ninjaprox](http://twitter.com/ninjaprox)