1. 引入CSS
<link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="prism/prism.css"> <link rel="stylesheet" href="../jquery.range.css">
2. 引入JS
<script src="../jquery.min.js"></script> <script src="../jquery.range.js"></script>
3. HTML代码
<section class="pane header"> <div class="header"> <h1>jRange</h1> <h2>jQuery Plugin to create Range Selector</h2> </div> </section> <section class="body demo"> <div class="container"> <h2>See it in Action</h2> <h3>Play around with the demo</h3> <div class="demo-container clearfix"> <div class="demo-section"> <div class="demo-code"> <pre><code class="language-javascript">$('.single-slider').jRange({ from: -2.0, to: 2.0, step: 0.5, scale: [-2.0,-1.0,0.0,1.0,2.0], format: '%s', width: 300, showLabels: true, snap: true });</code></pre> </div> <div class="demo-output"> <input class="single-slider" type="hidden" value="0.0"/> </div> </div> <div class="demo-section"> <div class="demo-code"> <pre><code class="language-javascript">$('.range-slider').jRange({ from: 0, to: 100, step: 1, scale: [0,25,50,75,100], format: '%s', width: 300, showLabels: true, isRange : true });</code></pre> </div> <div class="demo-output"> <input class="range-slider" type="hidden" value="25,75"/> </div> </div> </div> <div class="text-container"> <h2>How to Use</h2> <h3>Lets see some code</h3> <p>To get started you'll have to include <code>jquery.range.js</code> and <code>jquery.range.css</code> files in your html file.</p> <pre><code class="language-css"><link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script></code></pre> <p>Later just add an hidden input, where ever you want this slider to be shown.</p> <pre><code class="language-css"><input type="hidden" class="slider-input" value="23" /></code></pre> <p>After this you'll have to intialize this plugin for that input, as shown in the example above</p> <h2>Options</h2> <h3>See configuration options</h3> <p>Options can also be set programatically, by passing an options hash to the jRange method. <table class="plugin-options" width='900'> <tr> <th>Option</th> <th width="200">Override</th> <th>Type</th> <th>Details</th> </tr> <tr> <td>from</td> <td>Mandatory</td> <td>Integer</td> <td>Lower bound of slider</td> </tr> <tr> <td>to</td> <td>Mandatory</td> <td>Integer</td> <td>Upper bound of slider</td> </tr> <tr> <td>step</td> <td>Optional</td> <td>Integer</td> <td> <code>Default : 1</code> <p>amount of increment on each step</p> </td> </tr> <tr> <td>scale</td> <td>Optional</td> <td>Array</td> <td> <p>Array containing label which are shown below the slider. By default its [from, to].</p> </td> </tr> <tr> <td>showLabels</td> <td>Optional</td> <td>Boolean</td> <td> <p>False, if you'd like to hide label which are shown on top of slider.</p> <code>Default : true</code> </td> </tr> <tr> <td>showScale</td> <td>Optional</td> <td>Boolean</td> <td> <p>False, if you'd like to hide scale which are shown below the slider.</p> <code>Default : true</code> </td> </tr> <tr> <td>format</td> <td>Optional</td> <td>String / Function</td> <td> <p>this is used to show label on the pointer</p> <code>Default : "%s"</code> <p><code>String</code> : %s is replaced by its value, e.g., "%s days", "%s goats"</p> <p> <code>Function</code> : format(value, pointer) <br> <code>return</code> : string label for a given value and pointer. <br> <code>pointer</code> could be 'low'/'high' if <code>isRange</code> is true, else undefined </p> </td> </tr> <tr> <td>width</td> <td>Optional</td> <td>Integer</td> <td> <code>Default : 300</code> </td> </tr> <tr> <td>theme</td> <td>Optional</td> <td>String</td> <td> <code>Default : "theme-green"</code> <p>This is the css class name added to the container. Available themes are "theme-blue", "theme-green". You can also add more themes, just like in <code>jquery.range.less</code></p> </td> </tr> <tr> <td>isRange</td> <td>Optional</td> <td>Boolean</td> <td> <code>Default : false</code> <p>True if this is a range selector. If its a range the value of hidden input will be set comma-seperated, e.g., "25,75"</p> </td> </tr> <tr> <td>snap</td> <td>Optional</td> <td>Boolean</td> <td> <code>Default : false</code> <p>True to snap slider to step values</p> </td> </tr> <tr> <td>disable</td> <td>Optional</td> <td>Boolean</td> <td> <code>Default : false</code> <p>True if this is a disable(read only) range selector. You can also change disable status later by calling. </p> <code> $('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable'); </code> </td> </tr> <tr> <td>onstatechange</td> <td>Optional</td> <td>Function</td> <td> <p>This function is called whenever the value is changed by user. This same value is also automatically set for the provided Hidden Input.</p> <p>For single slider value is without comma, however for a range selector value is comma-seperated.</p> </td> </tr> <tr> <td>ondragend</td> <td>Optional</td> <td>Function</td> <td> <p>ondragend callback. Useful if you want to fire event just once per slider drag.</p> </td> </tr> <tr> <td>onbarclicked</td> <td>Optional</td> <td>Function</td> <td> <p>called when user clicks on the bar</p> </td> </tr> </table> <h2>Modification</h2> <h3>Change values on runtime</h3> <p>Methods which you can call to dynamically modify current values and range. <table class="plugin-options" width='900'> <tr> <th width="150">Method</th> <th></th> <th></th> <th>Description</th> </tr> <tr> <td>setValue</td> <td></td> <td></td> <td> <p>sets the current value of the slider without changing its range, if you want to update the range as well use <code>updateRange</code> instead.</p> <code> $('.slider').jRange('setValue', '10,20');<br> $('.slider').jRange('setValue', '10'); </code> </td> </tr> <tr> <td>updateRange</td> <td></td> <td></td> <td> <p>'updateRange' to change (min, max) value and interval after initialized.</p> <code> $('.slider').jRange('updateRange', '0,100');<br> $('.slider').jRange('updateRange', '0,100', '25,50');<br> $('.slider').jRange('updateRange', '0,100', 25); </code> <p>passing second parameter also sets its current value</p> </td> </tr> </table> </div> </div> </section> <script type="text/javascript"> $(document).ready(function(){ $('.single-slider').jRange({ from: -2.0, to: 2.0, step: 0.5, scale: [-2.0,-1.0,0.0,1.0,2.0], format: '%s', width: 300, showLabels: true, snap: true }); $('.range-slider').jRange({ from: 0, to: 100, step: 1, scale: [0,25,50,75,100], format: '%s', width: 300, showLabels: true, isRange : true }); }); </script>