Script Title: numberStepper
Programming Language: Java Script
Date Completed: 2013/01/08

Purpose: To emulate a Number Stepper field for a Web page, provides similar options and functionality to an input field.

Description: The Number Stepper is a field used in software to allow the user to add or subtract a set amount to set a value within a rage.

The user may input their own value into the field if allowed, however, the value most be in an interval of the stepper. For example if the stepper has the value of 5, then the step up and step down buttons add or subtract the value of 5, if the user enters their own value, the value most be in intervals of 5 or else the value is rounded to the nearest 5. The value 23 would be rounded to 25.

Methods:

var class = new numberStepper();

class.stepperId
Target the input field to step, takes a string value
class.stepUpId
Set or target the step up button, takes a string value
class.stepDownId
Set or target the step down button, takes a string value
class.steps
Set the number to step up or down and round to, default value 1
class.max
Set the maximum value limit, default value null
class.min
Set the minimum value limit, default value null
class.onlyDigits
Set to true or false, default value null for auto

class.appendStepperButtons()
Function to add step up and step down buttons to a field
class.start()
Function to start the number stepping event
class.stop()
Function to stop the number stepping event

Class.onlyDigits

Set to true to force the input field to only allow whole numbers, set to false to allow the input field to allow numbers with decimals values.

Default value null, when set to null, a true or false value will be set automatically determined by the class.steps value.

Example (class.steps = 1), the class.onlyDigits is set to true.
Example (class.steps = 1.5), the class.onlyDigits is set to false.

Class.appendStepperButtons()

Function to add step up and step down buttons to a field.

Target the input field by setting the class.stepperId, you may assign our own ID names to the step up or step down buttons by defining the class.stepUpId and class.stepDownId. If no value has been set, a default ID will apply.

Class.stepUpId = stepperId_stepUp
Class.stepDownId = stepperId_stepDown

Example Usage:

var nuStepper = new numberStepper();

nuStepper.stepperId = “myStepper”;
nuStepper.steps = 5;
nuStepper.max = 100;
nuStepper.min = 0;
nuStepper.appendStepperButtons();
nuStepper.start();

In this example, “myStepper” is the element ID of the input field to become a stepper. The number to step and round to is 5. The maximum value entered is limited to 100 and the minimum value is limited to 0. The append function is used, this means that we are adding two buttons to the right side of the input field, the element IDs have automatically been set to “myStepper_stepUp” and “myStepper_stepDown”.

If you want to dynamically fetch the automatically set ID names, we can use the class.stepUpId and class.stepDownId properties.

 

 

 

Be the first to write a comment.

---