Lightweight and Customisable Range Slider Plugin – noUiSlider

Basic Usage (Create a range slider):

1. Include the latest jQuery library and noUiSlider.js in your head section

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

2.Include necessary CSS file on your page

<link href="nouislider.fox.css" rel="stylesheet" type="text/css">
<link href="nouislider.space.css" rel="stylesheet" type="text/css">

3.Markup

<div class="noUiSlider"></div>
<span id="s1" class="example">40.00 - 80.00</span>

4.Call the plugin

<script>
$(".noUiSlider").noUiSlider({
    range: [20, 100]
   ,start: [40, 80]
   ,step: 20
   ,slide: function(){
      var values = $(this).val();
      $("span").text(
         values[0] +
         " - " +
         values[1]
      );
   }
});
</script>

4.Available options.

// sets the number of handles and their start positions
start: [20, 80],

// max & min range
range: {
  'min': [ 0 ],
  'max': [ 100 ]
},

// used to control the bar between the handles, or the edges of the slider
// lower or upper
connect: "lower",

// the minimum distance between the handles
margin: 30,

// limites the maximum distance between two handles
limit: 40,

// make the handles jump between intervals
step: 10,

// vertical or horizontal
orientation: "vertical",

// rtl or ltr
direction: "rtl",

// enables animation
animate: true,

 

Demo     Download

Lightweight and Customisable Range Slider Plugin – noUiSlider

| CSS3, HTML5, Javascript, jQuery Plugins, Responsive | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.