Simple jQuery Custom Range Slider Plugin - Spunky Slider

Simple jQuery Custom Range Slider Plugin - Spunky Slider
File Size: 4.37 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.