260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>jRange : jQuery Range Selector</title>
|
|
<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">
|
|
<link href='http://fonts.googleapis.com/css?family=Raleway:100,300' rel='stylesheet' type='text/css'>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<section class="pane header">
|
|
<div class="header">
|
|
<h1>jRange</h1>
|
|
<h2>jQuery Plugin to create Range Selector</h2>
|
|
</div>
|
|
<footer>
|
|
<div class="left">
|
|
<a href="http://twitter.com/share" class="twitter-share-button" data-url="https://github.com/nitinhayaran/jRange" data-text="jRange - jQuery plugin for Range Selector" data-count="none" data-via="nitinhayaran">Tweet</a>
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=nitinhayaran&repo=jRange&type=watch&count=false&size=small"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
|
|
</div>
|
|
<div class="right">
|
|
<a href="https://twitter.com/nitinhayaran" class="twitter-follow-button" data-show-count="false">Follow @nitinhayaran</a>
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=nitinhayaran&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="153" height="20"></iframe>
|
|
</div>
|
|
</footer>
|
|
</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: 0,
|
|
to: 100,
|
|
step: 1,
|
|
scale: [0,25,50,75,100],
|
|
format: '%s',
|
|
width: 300,
|
|
showLabels: true
|
|
});</code></pre>
|
|
</div>
|
|
<div class="demo-output">
|
|
<input class="single-slider" type="hidden" value="25"/>
|
|
</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>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>
|
|
</table>
|
|
|
|
<div class="footer">
|
|
<a href="https://github.com/nitinhayaran/jRange" class="large-github">Get it from Github</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="footer">
|
|
<div class="text-container clearfix">
|
|
<div class="left">
|
|
<p>
|
|
<a href="https://twitter.com/nitinhayaran" class="twitter-follow-button" data-show-count="false">Follow @nitinhayaran</a>
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
</p>
|
|
<p><iframe src="http://ghbtns.com/github-btn.html?user=nitinhayaran&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="153" height="20"></iframe></p>
|
|
</div>
|
|
<div class="right">
|
|
<p><a href="https://github.com/nitinhayaran/jRange">jRange</a> is authored and maintained by <a href="https://github.com/nitinhayaran/">@nitinhayaran</a></p>
|
|
<p>
|
|
Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT
|
|
License</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="prism/prism.js"></script>
|
|
|
|
<script src="../jquery.range.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('.single-slider').jRange({
|
|
from: 0,
|
|
to: 100,
|
|
step: 1,
|
|
scale: [0,25,50,75,100],
|
|
format: '%s',
|
|
width: 300,
|
|
showLabels: 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>
|
|
</body>
|
|
</html>
|