Download
> <a href="readme.md">English description</a> | ???????? ?? ???????
???????, ?????? ? ?????????? ??????? ??????????
*
-
??????: 2.1.4
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/index.html">???????? ??????? ? ????</a>
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.1.4.zip">????????? ZIP-?????</a>
????????
-
Ion.RangeSlider ? ????????, ???????, ?????????? ? ????? ????????????? ??????? ??????????
-
??????? ???????????? ??????? ? ????????? ??????, ????? ?????? ?????????, ????? ???? ????????? ??????????? ????? CSS
-
??????????????? ?????????: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
-
?????? ???????????? ?????????? ? touch-??????? (iPhone, iPad, Nexus, etc.)
-
<a href="https://github.com/IonDen/ion.rangeSlider">??????????? ?? GitHub</a>
-
?????? ???????? ???????????????? ?? ???????? <a href="http://ionden.com/a/plugins/licence.html" target="_blank">???????? MIT</a>
-
?????????? ???? ??????, ?? ??????? ????????? ????????? ???????? ??????????, ????? ??? ????:
???????? ???????????
-
????????? ??????. (5 ????? ? ????????? ? PSD ??? ???????????? ???????????)
-
?????????????? ???-?? ????????? ?? ????? ???????? ??? ???????????? ?????? ?????????????????? ? ?????????? ????? ????
-
??? ?????? ?????? ? 1 ??? 2 ??????????
-
????????? ????????????? ? ??????? ????????
-
??????????? ????????????? ??? ? ??????????? ????? ? ????
-
????? ???????????? ??????????? ?????? ???????? ??? ????????
-
????????????? ????? ????????
-
??????????? ???????? ?????????? (???. ? ????. ????????, ??????? ????????, ?????)
-
????????? ? ???????? ??? ???????? ?????? ????????? ($20, 20 € ? ?.?.)
-
?????????????? ???????? ??? ????????????? ???????? (???????? $0 ? $100<b>+</b>)
-
????????? ???????? ????????????? ??????? ???? (???????? 10000000 -> 10 000 000 ??? 10.000.000)
-
??????? ????? ???? ???????? ????? ? value ????????? ???? input, ??? ????????? ???????? ?????? ????? ?????? ????? ?????
-
????? ???????? ???????? ????? ??? ?? ?????? ????? data-??????? (???????? data-min="10")
-
??????? ???????????? ???????? disabled, ????????? ?????? ??????? ??????????
-
??????? ???????????? ??????? ?????? (update, reset ? remove), ??????????? ????????? ????????? ??? ????? ????????
-
??? ??????????? ????????????? ???? ????????? ???????? (onStart, onChange, onFinish, onUpdate). ??????? ???????? ???? ???????? ? ??? ??????? ?????? ?????????? ? ???? ???????
-
??????? ???????????? ?????? ? ????? ? ????????
????
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">??????? ?????????</a>
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">??????????? ?????????</a>
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">??????????????</a>
???????????
-
<a href="http://jquery.com/" target="_blank">jQuery 1.8.x+</a>
?????????????
?????????? ??????????:
* jQuery
* ion.rangeSlider.min.js
?????????? ?????:
* <a href="http://necolas.github.io/normalize.css/" target="_blank">normalize.css</a> (??????????, ???? ?? ? ??? ??? ?? ?????????)
* ion.rangeSlider.css
?? ???????? ??? ????. 5 ?????? ???????? ? ?????. ???????? ????:
* ion.rangeSlider.skinFlat.css + sprite-skin-flat.png
* ion.rangeSlider.skinHTML5.css + ??? ????????
* ion.rangeSlider.skinModern.css + sprite-skin-modern.png
* ion.rangeSlider.skinNice.css + sprite-skin-nice.png
* ion.rangeSlider.skinSimple.css + sprite-skin-simple.png
???? ?????????????? ????????? ? ????? PSD ??????, ? ????????? ??????????? ???? (?? ???????? ?????????????? ??????? ????????? ? CSS ?????)
????????????? ? ??????? bower
-
bower install ionrangeslider
????????????? ? ??????? npm
-
npm install ion-rangeslider
?????????????
??????? ??????? ???? <code>input type="text"</code>: <input type="text" id="example_id" name="example_name" value="" />
????? ????????? ???????, ???????? ionRangeSlider ??? ??????? ????????: $("#example_id").ionRangeSlider();
???? ??? ????????
???? ?? ??????? ? ??? ?????????? ? ?? ??????? ??? ????????? ?????????? ???? ?????? ?? ???? ????????, ?? ???????? ???
<a href="http://ionden.com/a/plugins/ion.rangeSlider/ionRangeSliderDemo.zip" class="button">???? ???? ??????</a>
???????? ? ?????? 1.x ?? 2.x
-
??? ????????? (????? ???????) ?????? ???????????? ???: <b>param_name</b>, ? ?? paramName
-
?????????? ???????? ????????? ??????????: hasGrid → <b>grid</b>, onLoad → <b>onStart</b>
-
????????? ?????? ??????? ? ??????? ????????, ???????????? ? ???????. ????????: fromNumber → <b>from</b>
-
??????? ?????? ????????? ?????????? ???? ???????? ? ???? value ? ? ???????? data-from ? data-to
<a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">???????? ??? ????????????? ? ????????</a>
?????????
<table class="options"> <thead>
<tr>
<th>???????</th>
<th>?? ?????????</th>
<th>???</th>
<th>????????</th>
</tr>
</thead>
<tbody>
<tr class="options__step">
<td>type<div><sup>data-type</sup></div></td>
<td>"single"</td>
<td>string</td>
<td>????????? ??????? ??? ????????, ????? ????????? ???????? <code>single</code> - ??? ?????????? ???????? ??? <code>double</code> - ??? ???????? ????????</td>
</tr>
<tr>
<td>min<div><sup>data-min</sup></div></td>
<td>10</td>
<td>number</td>
<td>?????????? ??????????? ????????? ???????? ????????.</td>
</tr>
<tr>
<td>max<div><sup>data-max</sup></div></td>
<td>100</td>
<td>number</td>
<td>?????????? ???????????? ????????? ???????? ????????.</td>
</tr>
<tr>
<td>from<div><sup>data-from</sup></div></td>
<td>min</td>
<td>number</td>
<td>????????? ?????? ????????? ??????? ?????? ???????? (??? ????????????? ????????)</td>
</tr>
<tr>
<td>to<div><sup>data-to</sup></div></td>
<td>max</td>
<td>number</td>
<td>????????? ?????? ????????? ??????? ??????? ????????</td>
</tr>
<tr class="options__step">
<td>step<div><sup>data-step</sup></div></td>
<td>1</td>
<td>number</td>
<td>?????? ??? ???????? ?????????. ?????? ?????? ????. ????? ???? ???????.</td>
</tr>
<tr>
<td>min_interval<div><sup>data-min-interval</sup></div></td>
<td>?</td>
<td>number</td>
<td>?????? ??????????? ???????? ????? ??????????. ?????? ??? ???? "double"</td>
</tr>
<tr class="options__step">
<td>max_interval<div><sup>data-max-interval</sup></div></td>
<td>?</td>
<td>number</td>
<td>?????? ???????????? ???????? ????? ??????????. ?????? ??? ???? "double"</td>
</tr>
<tr class="options__step">
<td>drag_interval<div><sup>data-drag-interval</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>????????? ???????????? ????????????? ???? ????????. ?????? ??? ???? "double" (beta)</td>
</tr>
<tr class="options__step">
<td>values<div><sup>data-values</sup></div></td>
<td>[]</td>
<td>array</td>
<td>?????????????? ???????? ????????, ?????????? ??????? ?? ??????? values. ????????? min, max, step ???????????????? ?????????????.</td>
</tr>
<tr class="options__new">
<td>from_fixed<div><sup>data-from-fixed</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>????????? ??????? ?????? ???????? (??? ????????????? ????????).</td>
</tr>
<tr class="options__new">
<td>from_min<div><sup>data-from-min</sup></div></td>
<td>min</td>
<td>number</td>
<td>???????????? ??????????? ??????? ?????? ????????.</td>
</tr>
<tr class="options__new">
<td>from_max<div><sup>data-from-max</sup></div></td>
<td>max</td>
<td>number</td>
<td>???????????? ???????????? ??????? ?????? ????????.</td>
</tr>
<tr class="options__new">
<td>from_shadow<div><sup>data-from-shadow</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>???????????? ??????????? ?????????? ?? ????? ????????.</td>
</tr>
<tr class="options__new">
<td>to_fixed<div><sup>data-to-fixed</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>????????? ??????? ??????? ????????.</td>
</tr>
<tr class="options__new">
<td>to_min<div><sup>data-to-min</sup></div></td>
<td>min</td>
<td>number</td>
<td>???????????? ??????????? ??????? ??????? ????????.</td>
</tr>
<tr class="options__new">
<td>to_max<div><sup>data-to-max</sup></div></td>
<td>max</td>
<td>number</td>
<td>???????????? ???????????? ??????? ??????? ????????.</td>
</tr>
<tr class="options__new options__step">
<td>to_shadow<div><sup>data-to-shadow</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>???????????? ??????????? ?????????? ?? ?????? ????????.</td>
</tr>
<tr>
<td>prettify_enabled<div><sup>data-prettify-enabled</sup></div></td>
<td>true</td>
<td>boolean</td>
<td>???????? ??????? ??? ??????? ????. 10000000 → 10 000 000</td>
</tr>
<tr class="options__new">
<td>prettify_separator<div><sup>data-prettify-separator</sup></div></td>
<td>" "</td>
<td>string</td>
<td>????????? ???????? ??????????? ??? ????????? ?????????? ??????? ????. 10 000, 10.000, 10-000 ? ?.?.</td>
</tr>
<tr class="options__new options__step">
<td>prettify<div><sup>?</sup></div></td>
<td>null</td>
<td>function</td>
<td>??????????? ??????? ??? ????????????? ???????? ????????. ????????? ?????? ? ??????? ??? ??? ??????, ???????? ??????????????? ? ???? ? ?????.</td>
</tr>
<tr class="options__new options__step">
<td>force_edges<div><sup>data-force-edges</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>?????????? ??????? ?????? ?????????? ?????? ?????? ?????? ??????????.</td>
</tr>
<tr class="options__new">
<td>keyboard<div><sup>data-keyboard</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>?????????? ?????????? ????????? ? ??????? ??????????. ?????: &larr, &darr, A, S. ??????: &rarr, &uarr, W, D.</td>
</tr>
<tr class="options__new options__step">
<td>keyboard_step<div><sup>data-keyboard-step</sup></div></td>
<td>5</td>
<td>number</td>
<td>??? ???????? ???????? ??? ?????????? ? ??????????. ???????? ? ?????????.</td>
</tr>
<tr>
<td>grid<div><sup>data-grid</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>???????? ??????????? ????? ????????.</td>
</tr>
<tr>
<td>grid_margin<div><sup>data-grid-margin</sup></div></td>
<td>true</td>
<td>boolean</td>
<td>??????????? ????? ?? ??????? ???????? ?????????, ???? ?? ???????? ??????????.</td>
</tr>
<tr class="options__new">
<td>grid_num<div><sup>data-grid-num</sup></div></td>
<td>4</td>
<td>number</td>
<td>?????????? ????? ? ?????.</td>
</tr>
<tr class="options__new options__step">
<td>grid_snap<div><sup>data-grid-snap</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>???????? ????? ? ???? ???????? (???????? step). ???? ???????????, ?? ???????? grid_num ?? ???????????.</td>
</tr>
<tr>
<td>hide_min_max<div><sup>data-hide-min-max</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>?????? ?????? "min" ? "max"</td>
</tr>
<tr class="options__step">
<td>hide_from_to<div><sup>data-hide-from-to</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>?????? ?????? "from" ? "to"</td>
</tr>
<tr>
<td>prefix<div><sup>data-prefix</sup></div></td>
<td>?</td>
<td>string</td>
<td>?????????? ??????? ??? ???????? ????????. ????? ????????? ????? ??????, ???????? $100.</td>
</tr>
<tr>
<td>postfix<div><sup>data-postfix</sup></div></td>
<td>?</td>
<td>string</td>
<td>?????????? ???????? ??? ???????? ????????. ????? ????????? ????? ?????, ???????? 100 ???.</td>
</tr>
<tr>
<td>max_postfix<div><sup>data-max-postfix</sup></div></td>
<td>?</td>
<td>string</td>
<td>?????????? ?????????????? ???????? ??? ????????????? ???????? ????????. ????? ????????? ???? ???? ?? ????????? ????????? ???????? ??????? ????????. ???????? 0 ? 100+</td>
</tr>
<tr class="options__new">
<td>decorate_both<div><sup>data-decorate-both</sup></div></td>
<td>true</td>
<td>boolean</td>
<td>???????????? ??? ???? "double", ? ?????? ???? ????? prefix ?/??? postfix. ??????????, ??? ???????????? ?????? ????????????? ????????.<br/>????????: $10k ? $100k ??? ?? $10 ? 100k</td>
</tr>
<tr class="options__new options__step">
<td>values_separator<div><sup>data-values-separator</sup></div></td>
<td>" ? "</td>
<td>string</td>
<td>??????????? ??? ?????? ????????????? ????????. ???????????? ??? ???? "double". ????????: 10 ? 100, 10 to 100, 10 + 100, 10 → 100 ? ?.?.</td>
</tr>
<tr class="options__step">
<td>input_values_separator<div><sup>data-input-values-separator</sup></div></td>
<td>" ; "</td>
<td>string</td>
<td>??????????? ??? ??????? ???????? ? ???? value ? ???????? input-????????</td>
</tr>
<tr class="options__step">
<td>disable<div><sup>data-disable</sup></div></td>
<td>false</td>
<td>boolean</td>
<td>????????? ???????, ?????? ??? ?? ????????.</td>
</tr>
<tr>
<td>onStart<div><sup>?</sup></div></td>
<td>null</td>
<td>function</td>
<td>???????. ?????????? ??? ?????? ????????.</td>
</tr>
<tr>
<td>onChange<div><sup>?</sup></div></td>
<td>null</td>
<td>function</td>
<td>???????. ?????????? ?????? ??? ????? ??????????? ???????? ????????.</td>
</tr>
<tr>
<td>onFinish<div><sup>?</sup></div></td>
<td>null</td>
<td>function</td>
<td>???????. ?????????? ????? ???????????? ??????????? ?????????? ????????.</td>
</tr>
<tr class="options__new">
<td>onUpdate<div><sup>?</sup></div></td>
<td>null</td>
<td>function</td>
<td>???????. ?????????? ????? ??????? ??????????? ??????? <code>update</code> ??? <code>reset</code>.</td>
</tr>
</tbody>
</table>
???????? ?????? ???????????? ? ??????? (onChange ? ?.?):
????????? ????? ??? object ? ?????????? ??????? ?????? ??????????: Obj: {
"input": object, // jQuery-?????? ?? input
"slider": object, // jQuery-?????? ?? ????????? ????????
"min": 0, // ???????? MIN
"max": 1000, // ???????? MAX
"from": 100, // ???????? ?? (???????? ?????? ??? ????????????? ????????)
"from_percent": 10, // ???????? ?? ? ?????????
"from_value": 0, // ?????? ?? ??????? values (???? ????????????)
"to": 900, // ???????? ?? (???????? ??????? ????????)
"to_percent": 90, // ???????? ?? ? ?????????
"to_value": 0 // ?????? ?? ??????? values (???? ????????????)
}
???????? ???????? c ???????????
?????? $("#example").ionRangeSlider({
min: 0,
max: 10000,
from: 1000,
to: 9000,
type: 'double',
prefix: "$",
grid: true,
grid_num: 10
});
??????? ? ??????????? ????? ????? ???????????????? ????????? ???????? <code>data-*</code> ? ???? <code>input</code>: data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"
????????? ??????
??? ???? ????? ???????????? ????????? ??????, ??????? ????? ???????? ???????? ???????? ? ??????????:: // ????????? ???????
$("#range").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
// ?????????? ??????? ? ??????????
var slider = $("#range").data("ionRangeSlider");
// ????????? ????????? ?????
slider.reset();
????? ?????????? 3 ????????? ??????: // UPDATE - ????????? ???????? ???????? (????? ?????? ????? ????????)
slider.update({
from: 300,
to: 400
});
// RESET - ?????????? ??????? ? ???????? ?????????
slider.reset();
// DESTROY - ??????? ??????? ? ??????????????? ???????? input
slider.destroy();
??? ??? ???????? ?? ????
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">??????? ?????????</a>
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">??????????? ?????????</a>
-
<a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">??????????????</a>
? ?????? ???? ??????? ????????????? ???? ????? ????????
<a href="history.md">??????? ??????????</a>
*
?????????? ?????????? ???????? ????? Ion:
-
???????????? ????? ?????? Pledgie: ![](https://pledgie.com/campaigns/25694)
-
???????????? ???????? ????? Paypal: https://www.paypal.me/IonDen
-
???????????? ???????? ????? ??????.??????: http://yasobe.ru/na/razrabotku
|