![ion.rangeSlider](_tmp/logo-ion-range-slider.png)
> English description | <a href="readme.ru.md">Описание на русском</a>
Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.
***
* Version: 2.1.6 | *Version 3.x is under developement now*
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html">Project page and demos</a>
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.1.6.zip">Download ZIP</a>
## Description
* Ion.RangeSlider — cool, comfortable, responsive and easily customizable range slider
* Supports events and public methods, has flexible settings, can be completely altered with CSS
* Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
* Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
* Ion.RangeSlider freely distributed under terms of <a href="http://ionden.com/a/plugins/licence.html" target="_blank">MIT licence</a>.
* With this plugin you will be able to build beautiful range sliders, like this:
![ion.rangeSlider](http://ionden.com/a/plugins/ion.rangeSlider/static/img/ion-range-slider.png)
## Key features
* Skin support. (5 skins included and PSD for skin creation)
* Any number of sliders at one page without conflicts and big performance problems
* Two slider types single (1 slider) and double (2 sliders)
* Support of negative and fractional values
* Ability to set custom step and snap grid to step
* Support of custom values diapason
* Customisable grid of values
* Ability to disable UI elements (min and max, current value, grid)
* Postfixes and prefixes for your numbers ($20, 20 € etc.)
* Additional postfix for maximum value (eg. $0 — $100<b>+</b>)
* Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
* Slider writes its value right into input value field. This makes it easy to use in any html form
* Any slider value can be set through input data-attribute (eg. data-min="10")
* Slider supports disable param. You can set it true to make slider inactive
* Slider supports external methods (update, reset and remove) to control it after creation
* For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
* Slider supports date and time
## Demos
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">Basic demo</a>
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">Advanced demo</a>
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">Interactions demo</a>
## Dependencies
* <a href="http://jquery.com/" target="_blank">jQuery 1.8.x+</a>
## Usage
Add the following libraries to the page:
* jQuery
* ion.rangeSlider.min.js
Add the following stylesheets to the page:
* <a href="http://necolas.github.io/normalize.css/" target="_blank">normalize.css</a> (optional)
* ion.rangeSlider.css
Plus, a skin for the slider. 5 skins are included. Choose one:
* ion.rangeSlider.skinFlat.css + sprite-skin-flat.png
* ion.rangeSlider.skinHTML5.css + no images
* ion.rangeSlider.skinModern.css + sprite-skin-modern.png
* ion.rangeSlider.skinNice.css + sprite-skin-nice.png
* ion.rangeSlider.skinSimple.css + sprite-skin-simple.png
Or use the included PSD file and design a custom skin.
## Install with bower
* bower install ionrangeslider
## Install with npm
* npm install ion-rangeslider
## Initialisation
The slider overrides a native text <code>input</code> element.
```html
<input type="text" id="example_id" name="example_name" value="" />
```
To initialise the slider, call ionRangeSlider on the element:
```javascript
$("#example_id").ionRangeSlider();
```
## Demo for juniors
If your are new in web development and you are not sure how to correctly install the plugin to your web-page, please download
<a href="http://ionden.com/a/plugins/ion.rangeSlider/ionRangeSliderDemo.zip" class="button">this demo example</a>
## Migrating from 1.x to 2.x
* All params (except functions) are lowercase now: <b>param_name</b>, not paramName
* Same param names was changed: hasGrid → <b>grid</b>, onLoad → <b>onStart</b>
* Callbacks data object format was changed. Example: fromNumber → <b>from</b>
* Slider now writes it's result to value attribute and also to data-from and data-to attributes
## <a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">Experiments playground</a>
## Settings
<table class="options">
<thead>
<tr>
<th>Option</th>
<th>Defaults</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="options__step">
<td>type<div><sup>data-type</sup></div></td>
<td>"single"</td>
<td>string</td>
<td>Choose slider type, could be <code>single</code> - for one handle, or <code>double</code> for two handles</td>
</tr>
<tr>
<td>min<div><sup>data-min</sup></div></td>
<td>10</td>
<td>number</td>
<td>Set slider minimum value</td>
</tr>
<tr>
<td>max<div><sup>data-max</sup></div></td>
<td>100</td>
<td>number</td>
<td>Set slider maximum value</td>
</tr>
<tr>
<td>from<div><sup>data-from</sup></div></td>
<td>min</td>
<td>number</td>
<td>Set start position for left handle (or for single handle)</td>
</tr>
<tr>
<td>to<div><sup>data-to</sup></div></td>
<td>max</td>
<td>number</td>
<td>Set start position for right handle</td>
</tr>
<tr class="options__step">
<td>step<div><sup>data-step</sup></div></td>
<td>1</td>
<td>number</td>
<td>Set sliders step. Always > 0. Could be fractional.</td>
</tr>
<tr>
<td>min_interval<div><sup>data-min-interval</sup></div></td>
<td>—</td>
<td>number</td>
<td>Set minimum diapason between sliders. Only in "double" type</td>
</tr>
<tr class="options__step">
<td>max_interval<div><sup>data-max-interval</sup></div></td>
<td>—</td>
<td>number</td>
<td>Set maximum diapason between sliders. Only in "double" type</td>
</tr>
<tr class="options__step">
<td>drag_interval<div><sup>data-drag-interval</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Allow user to drag whole range. Only in "double" type (beta)</td>
</tr>
<tr class="options__step">
<td>values<div><sup>data-values</sup></div></td>
<td>[]</td>
<td>array</td>
<td>Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed.</td>
</tr>
<tr class="options__new">
<td>from_fixed<div><sup>data-from-fixed</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>Fix position of left (or single) handle.</td>
</tr>
<tr class="options__new">
<td>from_min<div><sup>data-from-min</sup></div></td>
<td>min</td>
<td>number</td>
<td>Set minimum limit for left handle.</td>
</tr>
<tr class="options__new">
<td>from_max<div><sup>data-from-max</sup></div></td>
<td>max</td>
<td>number</td>
<td>Set the maximum limit for left handle</td>
</tr>
<tr class="options__new">
<td>from_shadow<div><sup>data-from-shadow</sup></div></td>
<td>false</td>
<td>boolean</
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
ion.rangeSlider-master.zip (25个子文件)
ion.rangeSlider-master
css
ion.rangeSlider.skinFlat.css 2KB
ion.rangeSlider.skinNice.css 2KB
ion.rangeSlider.skinHTML5.css 3KB
ion.rangeSlider.skinSimple.css 2KB
normalize.css 8KB
ion.rangeSlider.skinModern.css 2KB
ion.rangeSlider.css 3KB
img
sprite-skin-modern.png 505B
sprite-skin-nice.png 694B
sprite-skin-simple.png 358B
sprite-skin-flat.png 304B
package.json 1KB
PSD
sprite-skin.psd 160KB
readme.md 17KB
License.md 1KB
readme.ru.md 24KB
js
ion.rangeSlider.min.js 39KB
ion.rangeSlider.js 80KB
_tmp
logo-ion-range-slider.png 2KB
.npmignore 61B
.gitignore 5B
ion-rangeSlider.jquery.json 1KB
history.md 3KB
bower.json 943B
index.md 3KB
共 25 条
- 1
资源评论
- qq_212235532018-10-31终于找到你,不错
樊小书生
- 粉丝: 148
- 资源: 16
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功