jQuery Plugin To Convert Form labels Into Slider Controls - LabelSlider.js

LabelSlider.js is a small jQuery plugin that convert the form labels into slider controls based on jQuery UI draggable component. So that you can easily and quickly adjust the values in the input fields through clicking and moving your mouse on the associated input labels. Supports any type of input fields like number input, range input, date input, search input and much more. Licensed under the GNU GENERAL PUBLIC LICENSE.

Basic Usage:

1. Include the necessary jQuery library and jQuery UI in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

2. Include the jQuery LabelSlider.js script after jQuery library.

<script src="jquery.labelslider.min.js"></script>

3. Wrap your input field into the label element.

<label id="demo">Label <input></label>

4. Or create a label element associated with your input using for attribute.

<label id="demo" for="associated_input">Label</label> <input id="associated_input">

5. Initialize the plugin with default options.

$('#demo').labelSlider();

6. Default settings.

// Initialize the value of inputs whose values are not defined
initValue: true,

// The (non-negative) number of pixels the mouse must travel before the input is incremented or decremented. 
// Anything above 1 will cause the numbers to change more slowly.
// Anything less than 1 like 0.5 will cause the numbers to change faster.
pixelsPerUnit: 1,

// Set to true to wait until the user stops sliding before firing the change event for the input. 
// Set to false to fire the input's change event every time the number is incremented or decremented.
triggerChangeOnStop: false,

// Set to false to disable validation on the input. 
// This is useful if you have your own validation code or if you're using another plugin for validation. 
// When set to true only numbers are allowed to be entered into the input.
validate: true

---

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