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 Based Input Spinner Plugin For jQuery - Select Step

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.