Slim Animated Range Slider with jQuery and CSS3 - SlimSlider

SlimSlider is a jQuery range input plugin which helps you generate slim range sliders with support for section snapping, pips, floats and CSS3 animated labels.

How to use it:

1. Load the required slimslider.css for basic slider styles. You can change or override the CSS rules whatever you like to create your own styles.

<link rel="stylesheet" href="slimslider.css">

2. Create an element that will serve as the container for the range slider.

<div class="container"></div>

3. Load jQuery JavaScript library and the slimslider.css.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="slimslider.js"></script>

4. Create an array of pips / floats for the range slider.

var items = ['mammals', 'birds', 'fishes', 'reptiles', 'amphibians', 'invertebrates'];

5. Initialize the range slider.

$('.container').slimSlider({
  'items': items
});

6. Default plugin options.

items: [],
frequency: 0,
intermediate: !0,
init_sections: 0,
snap: true,
label: '',
decimal_places: 2

---

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