🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

UI Slider is a simple jQuery plugin that converts an DIV elements into an iOS-Style range slider with some customization options.

Range-Slider

Documentation

#jQuery UI Slider#

###Intro### Slider contol (like iOS) to configure a value in specified range

###How to install###

  1. Add to bower.json of your project:
{ 	// ... 	"dependencies": { 		// ... 		"jquery.ui-slider": "git://github.com/DenisIzmaylov/jquery.ui-slider.git" 	} }
  1. Run bower install.
  2. To any place at your HTML (just for example!):
<link href="path/to/plugin/css/jquery.ui-slider.css" rel="stylesheet" /> <script src="path/to/plugin/js/jquery.ui-slider.js"></script> <script src="javascript"> 	 	$(document).ready(function () { 		 		$('#container').UISlider({ 			             min: 0,             max: 99,             value: 50,             smooth: false  			 		}).on('change', function (value) { 			 			console.log('Your value:', value); 			 		}); 	 	}); 	 </script>
  1. You can also look example in example.html.

###Todo###

  1. Fix destroy method
  2. Add transition for onOwnerClick/onTrackClick
  3. Add 'invert', 'ranges' and 'highlight' options

You May Also Like