Simple jQuery Custom Range Slider Plugin - Spunky Slider

Spunky Slider is a lightweight jQuery plugin which converts a range input into a highly customizable and styleable range slider. 

How to use it:

1. Load the jQuery library and the jQuery spunky slider's script in the document.

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

2. Create a horizontal range input and custom the range slider via data-OPTION attributes. You can also pass the customization options via JS object.

<input data-fix-max-value="10" data-orientation="horizontal" value="0" type="range" min="0" max="10">  

3. Initialize the range slider by calling:

$('input').spunkySlider();

4. Style the range slider via CSS whatever you like.

input[type=range] {
  -webkit-appearance: none;
  background-color: #0099FF;
  height: 4px;
  width: 300px;
  border: none;
  border-radius: 4px;
}
 input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 background-color: #0099FF;
 border: none;
 height: 30px;
 width: 30px;
 border-radius: 50%;
 opacity: 0.8;
}

input[type=range]:focus { outline: none; }

input[type=range]:hover { background: #B2E0FF; }

5. Available options.

• data-orientation: "horizontal" or "vertical" 
• data-step: steps in the range
• data-fix-min-value: lowest value possible
• data-fix-max-value: maximum value possible
• data-bound-select-id: "select" elements's id which you want to bind with slider
• data-color-mix-element-id: element which you want to color using rgb values of slider

---

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