Mouse drag and touch enabled jQuery input field stepper: jquery.stepper.basic

The jquery.stepper.basic plug-in

Generally, we use the sliders for increasing or decreasing a value for enabling visitors to select a value in a form by mouse drag or using the touch devices.

The stepper.basic plug-in works with the input text field and allows changing the value by drag and drop or by fingers in a touch device. For example, your form has the age input field. A user may enter the age by drag and drop way inside the text input field.

Demo1 Demo2 Demo3
Developer page Download plug-in

How to set up stepper plug-in?

Download the plug-in and include the jquery.stepper.js file in your web page:

<script src=”js/stepper/jquery.stepper.js”></script>

Associate the text field with the plug-in by using its wrapper (div) class or ID as shown in the demos below.

Initiate the plug-in:

$(function () {

$(‘#demo-stepper’).stepper();

});

A demo of using the stepper plug-in

In this example of demonstrating the stepper plug-in, a text field is created in a div wrapper. The initial value displayed is 100%. Take the mouse pointer inside the text field and drag the “slider” for moving the percentage:

jQuery stepper

See online demo and code

The markup:

 <div style="width:250px">

    <label>Select percentage</label>



                                 

    <div class="stepper" id="stepper-demo">

     <div class="stepper-progress"></div>

      <input type="text" class="stepper-number">

 </div>
</div>

 

The simple jQuery code for initializing the plug-in:

$(function () {

   $('#stepper-demo').stepper();

});

 

An example of setting the min and max values for the stepper

The minimum and maximum values can be set by using the min and max attributes, respectively. See this example where the max value is set as 80% while the minimum value is 20%. The slider inside the text field will move in between these two values (inclusive)”

See online demo and code

Only the markup is changed then the above example:

<div class="stepper" id="stepper-demo">

  <div class="stepper-progress"></div>

  <input type="text" class="stepper-number" min="20" max="80">

</div>

 

Using different options of the stepper

The plug-in has a few options to customize the stepper input field for changing the numeric values. In above demos, only the percentage is displayed that cannot be the case always. Let us say, your form as an option to enter the number of pieces for placing the order, or enter your age etc. In these cases, you need different units.

In this example, the “pc” is used as the suffix that can be done by using the unit option.

The initialValue option is used with the value of 4.

The Minimum and maximum values are set by using the options rather attribute. For that, use the min and max options.

The stepSize can be used for changing the value for each step. Have a look:

jQuery stepper style

See online demo and code

The script:

<script>

$(function () {

$('#stepper-demo').stepper({

                selectorProgressBar: '.stepper-progress',

                selectorInputNumber: '.stepper-number',

                classNameChanging: 'is-changing',

                decimals: 1,

                unit: 'pc',

                initialValue: 4,

                min: 4,

                max: 50,

                stepSize: 1

});

});

</script>

 

The markup is simple:

<div class="stepper" id="stepper-demo">

  <div class="stepper-progress"></div>

  <input type="text" class="stepper-number">

</div>

In the script, you can also see selectorProgressBar, selectorInputNumber, and classNameChanging options for specifying the styling of the drag and drop input field (stepper). You may change the values there and specify your custom CSS for changing the style.

I have used the same names and overridden a few properties to change the color of the stepper field.

The CSS:

<style>

.stepper-number {

  position: relative;

  width: 100%;

  height: 28px;

  line-height: 28px;

  padding: 0 6px;

  color: #fff;

  background: #59ACAC;

  border: 0;

  outline: 0;

  outline-offset: 0;

  cursor: col-resize;

  z-index: 2;

}

.stepper.is-changing .stepper-progress {

  background-color: #D96C00;

}

</style>

 

For more on this plug-in, go to the developer page on GitHub website.