jQuery Multi-Node Range and Data Slider
This is another jQuery slider that would amp up your website’s interface. The multi-node range and data slider, created by EGrappler, is extremely simple to use. It is highly customizable and has many functions aside from providing data selection and filtering.
Click on the image for the demo.
Download the zip file.
CSS
.slider.default
{
background-color: #D2DBEC;
border: 1px solid #299BC9;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
width: 200px;
height: 4px;
background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);
}
.inner.default
{
background: #299BC9;
-moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
-webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
}
.draghandle.default
{
width: 8px;
height: 20px;
background-color: #299BC9;
}
.draghandle.default.selected
{
background-color: #ADC7EB;
}
The above code is for the default theme, and you can change it into your theme name. Aside from the default theme, you can choose from the following theme colors: simple, blue, steel, green, dark-green, orange and red.
When your theme is all set, you can use it like so:
$('#my-slider').jqslider({theme:'YOUR THEME NAME HERE'});
Add the following in the head section of your HTML file
- Add a reference to latest jQuery script
- Add a reference to jqslider.js
- Add a reference to jqslider.css
Add block element (div) within body of HTML and assign id and call jqslider initialize function.
<div id="jqslider"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#jqslider').jqslider({ theme:'steel' });
});
</script>
0
509
