Customizable jQuery Amount Slider Plugin - Input Slider

File Size: 5.16 KB
Views Total: 3499
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable jQuery Amount Slider Plugin - Input Slider

Input Slider is a jQuery plugin that converts an input field into a nice amount/range slider with a custom handle.

How to use it:

1. Add inputSlider-1.0.css & inputSlider-1.0.css to your webpage.

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="inputSlider-1.0.css">

</head>
<body>

  // markup here

  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="inputSlider-1.0.js"></script>
</body>
</html>

2. Then add the markup inside body. Attribute "data-start" is the starting integer & "data-end" is the ending integer the slider will output value between these two number. Add class "sls-limit" to add 2nd handle, now user can make his own criteria between given limits remove add class "sls-knob-disabled" to remove dots (good for >50 difference).

<div class="sls-container">
  <input type="text" name="data">
  <div data-start="12" data-end="24" class="sls sls-limit">
    <div class="sls-handle"></div>
  </div>
</div>

3. To get the slider value, use the input field inside "sls-container". give it an unique name and get data back from it using PHP or Javascript normally. For single handle slider, input field stores the single value. For double handle slider, input field stores value as <slider_left_value>-<slider_right_value> in that case explode the value by "-".


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