Simple Nice jQuery Value & Range Slider Plugin - Fresh Slider
File Size: | 13.7 KB |
---|---|
Views Total: | 14619 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.