Simple Animated Slider Control Plugin With jQuery - addSlider

Simple Animated Slider Control Plugin With jQuery - addSlider
File Size: 55.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.