七彩影视双端更新版本源码

 > English description | <a href="readme.ru.md">Описание на русском</a> Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. *** * Version: 2.2.0 | *Version 3.x is under development 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.2.0.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:  ## 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 &euro; 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> ## <a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">Experiments playground</a> Here you can find bunch of advanced JSFIDDLE demos with different, non-standart use cases: * [Reverse or RTL](http://jsfiddle.net/IonDen/gbmszmp4/) * [1 handle bind to 1 input](http://jsfiddle.net/IonDen/mvrfg2vc/) * [2 handles bind to 2 inputs](http://jsfiddle.net/IonDen/r5aox84v/) * [2 sliders connected to each other](http://jsfiddle.net/IonDen/4k3d4y3s/) * [1st slider disables/enables 2nd slider](http://jsfiddle.net/IonDen/ctkouh69/) * [Non-linear slider](http://jsfiddle.net/IonDen/pzjaoxe7/) * [Plus and Minus buttons](http://jsfiddle.net/IonDen/wsk7y08a/) * [Calculating sum](http://codepen.io/anon/pen/QyzwJZ) * [Adding one more diapazon on 1 slider](http://jsfiddle.net/IonDen/st9eotpy/) * [Live editing of Min and Max values](http://jsfiddle.net/IonDen/wL8gq4py/) * [Prettify and transform values at the same time](http://jsfiddle.net/IonDen/j0tLzgq1/) * [Custom marks on slider](http://jsfiddle.net/IonDen/spez12kt/) * [Rendering money value n.nn](http://jsfiddle.net/IonDen/vrqqL2Lw/) * [Rendering Dates with Moment.js](http://jsfiddle.net/tvn2ckj2/) * [Changing step live](http://jsfiddle.net/IonDen/ca6ykae6/) * [Toggle slider](http://jsfiddle.net/IonDen/t936wtjv/) * [Using different skin color at the same time](http://jsfiddle.net/IonDen/2sruxk4e/) * [2 dependant sliders](http://jsfiddle.net/IonDen/n2sxswv2/) * [Skip some values](http://jsfiddle.net/IonDen/4qgq9bto/) * [Good Prettify example](http://jsfiddle.net/IonDen/bvbvr0xs/) ## Settings | Option | Data-Attr | Defaults | Type | Description | | --- | --- | --- | --- | --- | | `type` | `data-type` | `single` | string | Choose slider type, could be `single` - for one handle, or `double` for two handles | | `min` | `data-min` | `10` | number | Set slider minimum value | | `max` | `data-max` | `100` | number | Set slider maximum value | | `from` | `data-from` | `min` | number | Set start position for left handle (or for single handle) | | `to` | `data-to` | `max` | number | Set start position for right handle | | `step` | `data-step` | `1` | number | Set sliders step. Always > 0. Could be fractional | | `min_interval` | `data-min-interval` | `-` | number | Set minimum diapason between sliders. Only for **double** type | | `max_interval` | `data-max-interval` | `-` | number | Set minimum maximum between sliders. Only for **double** type | | `max_drag_interval` | `data-drag-interval` | `false` | boolean | Allow user to drag whole range. Only for **double** type | | `values` | `data-values` | `[]` | array | 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 | | `from_fixed` | `data-from-fixed` | `false` | boolean | Fix position of left (or single) handle | | `from_min` | `data-from-min` | `min` | number | Set minimum limit for left (or single) handle | | `from_max` | `data-from-max` | `max` | number | Set maximum limit for left (or single) handle | | `from_shadow` | `data-from-shadow` | `false` | boolean | Highlight the limits for left handle | | `to_fixed` | `data-to-fixed` | `false` | boolean | Fix position of right handle | | `to_min` | `data-to-min` | `min` | number | Set minimum limit for right handle | | `to_max` | `data-to-max` | `max` | number | Set maximum limit for right handle | | `to_shadow` | `data-to-shadow` | `false` | boolean | Highlight the right handle | | `prettify_enabled` | `data-prettify-enabled` | `true` | boolean | Improve readability of long numbers: 10000000 &rarr; 10 000 000 | | `prettify_separator` | `data-prettify-separator` | ` ` | string | Set up your own separator for long numbers: 10000000 &rarr; 10,000,000 etc. | | `prettify` | `-` | `null` | function | Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than