Simple Animated Slider Control Plugin With jQuery - addSlider

File Size: 55.2 KB
Views Total: 4095
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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.


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

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