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">&lt;link rel="stylesheet" href="jquery.range.css"&gt;
&lt;script src="jquery.range.js"&gt;&lt;/script&gt;</code></pre>
				<p>Later just add an hidden input, where ever you want this slider to be shown.</p>
				<pre><code class="language-css">&lt;input type="hidden" class="slider-input" value="23" /&gt;</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>