Simple Nice jQuery Value & Range Slider Plugin - Fresh Slider

Fresh Slider is a lightweight jQuery plugin that turns DIV elements into nice clean value/range sliders with custom step and callbacks support.

Basic Usage:

1. Load the jQuery library and jQuery fresh slider in the footer to reduce the page load time.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="freshslider.1.0.js"></script>

2. Create an DIV element with an unique ID to render an value/range slider.

<div id="demo"></div>

3. Call the plugin on the DIV element you created and set custom options for the slider.

$("#demo").freshslider({
range: true, // true or false
step: 1,
text: true,
min: 0,
max: 100,
unit: none, // the unit which slider is considering
enabled: true, // true or false
value: 10, // a number if unranged , or 2 elements array contains low and high value if ranged
onchange:function(low, high){} // callback function when slider caret's changed, onchange(low, high) for ranged, and onchange(value) for unranged
});

4. The required CSS styles.

.fsslider {
position: relative;
min-width: 150px;
height: 24px;
display: inline-block;
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #000;
}
.fsslider {
text-align: center;
line-height: 24px;
font-size: 11px;
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
}
.fsslider > * {
position: absolute;
top: 50%;
cursor: pointer;
}
.fsslider > .fsfull-value, .fsslider > .fssel-value {
margin-top: -1px;
height: 2px;
left: 0;
right: 0;
}
.fsslider > .fsfull-value {
width: 100%;
background: #d8d8d8;
}
.fsslider > .fssel-left, .fsslider > .fssel-right, .fsslider > .fscaret {
background: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
height: 100%;
min-width: 30px;
top: 0;
padding-left: 5px;
padding-right: 5px;
}
.fsslider > .fssel-value {
background: #27c470;
height: 4px;
margin-top: -2px;
right: 50%;
}
.fsslider.fsdisabled {
color: #c8c8c8;
}
.fsslider.fsdisabled > .fssel-value {
background: #c8c8c8;
}

Change log:

v1.0 (2014-09-27)

• update.

---

This awesome jQuery plugin is developed by tuanchauict. For more Advanced Usages, please check the demo page or visit the official website.