Select Based Input Spinner Plugin For jQuery - Select Step
File Size: | 55.9 KB |
---|---|
Views Total: | 3767 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Select Step is a jQuery plugin that converts the standard select box into an input spinner with increment / decrement step buttons. The plugin allows the user to pick options by using -/+ buttons, instead of select the options from the dropdown list.
How to use it:
1. Include the jQuery 3 slim library in the html document to improve the page load time.
<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script>
2. Include the jQuery Select Step plugin's JS and CSS files in the document.
<link rel="stylesheet" href="dist/jquery-select-step.css"> <script src="dist/jquery-select-step.js"></script>
3. Add the CSS class 'select-step' to your select element.
<select name="demo" id="demo" class="select-step"> <option value="1">jQuery</option> <option value="1">jQuery</option> <option value="2">HTML5</option> <option value="3">CSS3</option> <option value="4">JavaScript</option> <option value="5">Ruby</option> <option value="6">React</option> <option value="7">React-Native</option> <option value="8">AngularJS</option> <option value="9">Python</option> <option value="10">PHP</option> </select>
4. Just call the jQuery function selectStep
on the select element and done.
$(".select-step").selectStep();
5. Change the default increment / decrement labels.
$(".select-step").selectStep({ incrementLabel: "+", decrementLabel: "-", });
6. Get the user selected value using onChange
callback.
$(".select-step").selectStep({ onChange: function(value) { console.log(value, "value"); } });
This awesome jQuery plugin is developed by diruuu. For more Advanced Usages, please check the demo page or visit the official website.