Simple Animated Slider Control Plugin With jQuery - addSlider

addSlider is an easy-to-use jQuery plugin that lets you render animated, configurable single-value sliders and/or range sliders in the web applications.

Features:

• Based on the regular input field.
• Custom slider tracks and labels.
• Animations based on CSS3 transitions and transforms.
• Horizontal & vertical layouts.
• All configuration options can be passed via HTML5 data attributes.

How to use it:

1. Add the jQuery addSlider plugin's files and other required resources to the webpage.

<link rel="stylesheet" href="src/addSlider.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="Obj.min.js"></script>
<script src="src/addSlider.js"></script>

2. Just add the data-addui='slider' attribute to the normal input field and we're done.

<input
  data-addui='slider'
/>

3. Config the slider control with the following data attribute:

• data-mindirection: horizontal or vertical
• data-min: min value
• data-max: max value
• data-formatter: custom formatter
• data-fontsize: font size
• data-step: custom step
• data-range: enable / disable range slider
• data-timeout: fading speed
• data-name: custom slider name
• data-class: addtional CSS class

<input
  data-addui='slider'
  data-min='10'
  data-formatter='usd'
  data-fontsize='14'
  data-step='0.05'
  data-range='true'
  value='25.50,50.00'
/>

---

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