Ionrangeslider.js文档API

缺乏、安全感 2022-07-11 07:25 117阅读 0赞

## 官方文档 ##

<table> 
 <thead> 
  <tr> 
   <th>Option</th> 
   <th align="center">Defaults</th> 
   <th align="center">Type</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type<br>data-type</td> 
   <td align="center">“single”</td> 
   <td align="center">string</td> 
   <td align="left">Choose slider type, could be single - for one handle, or double for two handles</td> 
  </tr> 
  <tr> 
   <td>min<br>data-min</td> 
   <td align="center">10</td> 
   <td align="center">number</td> 
   <td align="left">Set slider minimum value</td> 
  </tr> 
  <tr> 
   <td>max<br>data-max</td> 
   <td align="center">100</td> 
   <td align="center">number</td> 
   <td align="left">Set slider maximum value</td> 
  </tr> 
  <tr> 
   <td>from<br>data-from</td> 
   <td align="center">min</td> 
   <td align="center">number</td> 
   <td align="left">Set start position for left handle (or for single handle)</td> 
  </tr> 
  <tr> 
   <td>to<br>data-to</td> 
   <td align="center">max</td> 
   <td align="center">number</td> 
   <td align="left">Set start position for right handle</td> 
  </tr> 
  <tr> 
   <td>step<br>data-step</td> 
   <td align="center">1</td> 
   <td align="center">number</td> 
   <td align="left">Set sliders step. Always &gt; 0. Could be fractional.</td> 
  </tr> 
  <tr> 
   <td>min_interval<br>data-min-interval</td> 
   <td align="center">—</td> 
   <td align="center">number</td> 
   <td align="left">Set minimum diapason between sliders. Only in “double” type</td> 
  </tr> 
  <tr> 
   <td>max_interval<br>data-max-interval</td> 
   <td align="center">—</td> 
   <td align="center">number</td> 
   <td align="left">Set maximum diapason between sliders. Only in “double” type</td> 
  </tr> 
  <tr> 
   <td>drag_interval<br>data-drag-interval</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Allow user to drag whole range. Only in “double” type (beta)</td> 
  </tr> 
  <tr> 
   <td>values<br>data-values</td> 
   <td align="center">[]</td> 
   <td align="center">array</td> 
   <td align="left">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> 
   <td>from_fixed<br>data-from-fixed</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Fix position of left (or single) handle.</td> 
  </tr> 
  <tr> 
   <td>from_min<br>data-from-min</td> 
   <td align="center">min</td> 
   <td align="center">number</td> 
   <td align="left">Set minimum limit for left handle.</td> 
  </tr> 
  <tr> 
   <td>from_max<br>data-from-max</td> 
   <td align="center">max</td> 
   <td align="center">number</td> 
   <td align="left">Set the maximum limit for left handle</td> 
  </tr> 
  <tr> 
   <td>from_shadow<br>data-from-shadow</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Highlight the limits for left handle</td> 
  </tr> 
  <tr> 
   <td>to_fixed<br>data-to-fixed</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Fix position of right handle.</td> 
  </tr> 
  <tr> 
   <td>to_min<br>data-to-min</td> 
   <td align="center">min</td> 
   <td align="center">number</td> 
   <td align="left">Set the minimum limit for right handle</td> 
  </tr> 
  <tr> 
   <td>to_max<br>data-to-max</td> 
   <td align="center">max</td> 
   <td align="center">number</td> 
   <td align="left">Set the maximum limit for right handle</td> 
  </tr> 
  <tr> 
   <td>to_shadow<br>data-to-shadow</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Highlight the limits for right handle</td> 
  </tr> 
  <tr> 
   <td>prettify_enabled<br>data-prettify-enabled</td> 
   <td align="center">true</td> 
   <td align="center">boolean</td> 
   <td align="left">Improve readability of long numbers. 10000000 → 10 000 000</td> 
  </tr> 
  <tr> 
   <td>prettify_separator<br>data-prettify-separator</td> 
   <td align="center">” “</td> 
   <td align="center">string</td> 
   <td align="left">Set up your own separator for long numbers. 10 000, 10.000, 10-000, etc.</td> 
  </tr> 
  <tr> 
   <td>prettify<br>—</td> 
   <td align="center">null</td> 
   <td align="center">function</td> 
   <td align="left">Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.</td> 
  </tr> 
  <tr> 
   <td>force_edges<br>data-force-edges</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Slider will be always inside it’s container.</td> 
  </tr> 
  <tr> 
   <td>keyboard<br>data-keyboard</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.</td> 
  </tr> 
  <tr> 
   <td>keyboard_step<br>data-keyboard-step</td> 
   <td align="center">5</td> 
   <td align="center">number</td> 
   <td align="left">Movement step, than controling from keyboard. In percents.</td> 
  </tr> 
  <tr> 
   <td>grid<br>data-grid</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Enables grid of values.</td> 
  </tr> 
  <tr> 
   <td>grid_margin<br>data-grid-margin</td> 
   <td align="center">true</td> 
   <td align="center">boolean</td> 
   <td align="left">Set left and right grid borders.</td> 
  </tr> 
  <tr> 
   <td>grid_num<br>data-grid-num</td> 
   <td align="center">4</td> 
   <td align="center">number</td> 
   <td align="left">Number of grid units.</td> 
  </tr> 
  <tr> 
   <td>grid_snap<br>data-grid-snap</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Snap grid to sliders step (step param). If activated, grid_num will not be used.</td> 
  </tr> 
  <tr> 
   <td>hide_min_max<br>data-hide-min-max</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Hides min and max labels</td> 
  </tr> 
  <tr> 
   <td>hide_from_to<br>data-hide-from-to</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Hide from and to lables</td> 
  </tr> 
  <tr> 
   <td>prefix<br>data-prefix</td> 
   <td align="center">—</td> 
   <td align="center">string</td> 
   <td align="left">Set prefix for values. Will be set up right before the number: $100</td> 
  </tr> 
  <tr> 
   <td>postfix<br>data-postfix</td> 
   <td align="center">—</td> 
   <td align="center">string</td> 
   <td align="left">Set postfix for values. Will be set up right after the number: 100k</td> 
  </tr> 
  <tr> 
   <td>max_postfix<br>data-max-postfix</td> 
   <td align="center">—</td> 
   <td align="center">string</td> 
   <td align="left">Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+</td> 
  </tr> 
  <tr> 
   <td>decorate_both<br>data-decorate-both</td> 
   <td align="center">true</td> 
   <td align="center">boolean</td> 
   <td align="left">Used for “double” type and only if prefix or postfix was set up. Determine how to decorate close values. For example: <span></span><span> <span style="width: 3.203em; display: inline-block;"><span style="display: inline-block; position: relative; width: 2.563em; height: 0px; font-size: 125%;"><span style="position: absolute; clip: rect(1.869em 1000em 2.883em -0.371em); top: -2.717em; left: 0.003em;"><span><span style="font-family: MathJax_Main;">10</span><span style="font-family: MathJax_Math-italic;">k</span><span style="font-family: MathJax_Main;">—</span></span><span style="display: inline-block; width: 0px; height: 2.723em;"></span></span></span><span style="border-left-width: 0.003em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 1.003em; vertical-align: -0.063em;"></span></span> </span>100k or $10 — 100k</td> 
  </tr> 
  <tr> 
   <td>values_separator<br>data-values-separator</td> 
   <td align="center">” — “</td> 
   <td align="center">string</td> 
   <td align="left">Set your own separator for close values. Used for “double” type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.</td> 
  </tr> 
  <tr> 
   <td>input_values_separator<br>data-input-values-separator</td> 
   <td align="center">” ; “</td> 
   <td align="center">string</td> 
   <td align="left">Separator for double values in input value property.</td> 
  </tr> 
  <tr> 
   <td>disable<br>data-disable</td> 
   <td align="center">false</td> 
   <td align="center">boolean</td> 
   <td align="left">Locks slider and makes it inactive.</td> 
  </tr> 
  <tr> 
   <td>onStart<br>—</td> 
   <td align="center">null</td> 
   <td align="center">function</td> 
   <td align="left">Callback. Is called on slider start.</td> 
  </tr> 
  <tr> 
   <td>onChange<br>—</td> 
   <td align="center">null</td> 
   <td align="center">function</td> 
   <td align="left">Callback. IS called on each values change.</td> 
  </tr> 
  <tr> 
   <td>onFinish<br>—</td> 
   <td align="center">null</td> 
   <td align="center">function</td> 
   <td align="left">Callback. Is called than user releases handle.</td> 
  </tr> 
  <tr> 
   <td>onUpdate<br>—</td> 
   <td align="center">null</td> 
   <td align="center">function</td> 
   <td align="left">Callback. Is called than slider is modified by external methods update or reset.</td> 
  </tr> 
 </tbody> 
</table>

## 例子 ##

以下是一个小例子，单个的、双向的、禁止移动的，其他的可参考官网上例子。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/ion.rangeSlider.css">
        <link rel="stylesheet" type="text/css" href="css/ion.rangeSlider.skinFlat.css">
        <script type="text/javascript" src="js/ion.rangeSlider.js"></script>
    </head>
    <body>
    <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    <div style="width: 500px;height: 100px;margin: 0 auto"><input id="rangeSingle" type="" name=""></div>
    <div style="width: 500px;height: 100px;margin: 0 auto"><input id="rangeDouble" type="" name=""></div>
    <div style="width: 500px;height: 100px;margin: 0 auto"><input id="rangeSingleNoSlider" type="" name=""></div>
    <div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    <script type="text/javascript"> $("#rangeSingle").ionRangeSlider({ min: 0, max: 10000, from: 1000, to: 9000, type: 'single', prefix: "$", grid: true, grid_num: 5 }); $("#rangeDouble").ionRangeSlider({ min: 0, max: 10000, from: 1000, to: 9000, type: 'double', postfix: "万", grid: true, grid_num: 10 }); $("#rangeSingleNoSlider").ionRangeSlider({ min: 0, max: 10000, from: 3000, from_fixed: true,//可设置禁止移动 type: 'single', postfix: "米", prettify: true, grid: true, grid_num: 10 }); </script>
    </body>
    </html>

基本例子可参考：[http://ionden.com/a/plugins/ion.rangeSlider/demo.html][http_ionden.com_a_plugins_ion.rangeSlider_demo.html]  
先进的演示可参考：[http://ionden.com/a/plugins/ion.rangeSlider/demo\_advanced.html][http_ionden.com_a_plugins_ion.rangeSlider_demo_advanced.html]  
互动演示可参考：  
[http://ionden.com/a/plugins/ion.rangeSlider/demo\_interactions.html][http_ionden.com_a_plugins_ion.rangeSlider_demo_interactions.html]

## 下载Ionrangeslider文件 ##

Ionrangeslider文件可以从此处下载：[http://download.csdn.net/detail/fxss5201/9741066][http_download.csdn.net_detail_fxss5201_9741066]

[http_ionden.com_a_plugins_ion.rangeSlider_demo.html]: http://ionden.com/a/plugins/ion.rangeSlider/demo.html
[http_ionden.com_a_plugins_ion.rangeSlider_demo_advanced.html]: http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
[http_ionden.com_a_plugins_ion.rangeSlider_demo_interactions.html]: http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html
[http_download.csdn.net_detail_fxss5201_9741066]: http://download.csdn.net/detail/fxss5201/9741066