Constructor
# new NumericStepper(parent, x, y, label, value, min, max, defaultHandler)
Constructor
Parameters:
| Name | Type | Description |
|---|---|---|
parent |
HTMLElement | The element to add this numeric stepper to. |
x |
number | The x position of the numeric stepper. Default 0. |
y |
number | The y position of the numeric stepper. Default 0. |
label |
string | The text label of the numeric stepper. Default empty string. |
value |
number | The initial value of the numeric stepper. Default 0. |
min |
number | The minimum value of the numeric stepper. Default 0. |
max |
number | The maximum value of the numeric stepper. Default 100. |
defaultHandler |
function | A function that will handle the "change" event. |
- Source:
Example
const panel = new Panel(document.body, 20, 20, 200, 200);
new NumericStepper(panel, 20, 20, 50, 0, 100, event => console.log(event.target.value));Extends
Classes
Members
# (static) decimals
Default decimals for all NumericSteppers.
- Source:
# (static) labelPosition
Default labelPosition of all NumericSteppers.
- Source:
# (static) width
Default width of all NumericSteppers.
- Source:
# decimals
Sets and gets the number of decimals of precision to be used for the stepper. This will effect what is shown in the value label as well as the value property of the stepper. A decimals value of 0 will display integers only. Negative decimals will round to the nearest power of 10. Clicking the plus and minus button will _increment or _decrement the stepper's value by the smallest displayed value.
- Source:
# enabled
Sets and gets whether or not this component is enabled. Non-enabled components will be faded out and not respond to events.
- Overrides:
- Source:
# height
Sets and gets the height of this component.
- Overrides:
- Source:
# label
Gets and sets the text of the color picker's text label.
- Source:
# labelPosition
Gets and sets the position of the text label displayed on the color picker. Valid values are "top" (default), "left", "right" and "bottom".
- Source:
# max
Gets and sets the maximum value of the stepper.
- Source:
# min
Gets and sets the minimum value of the stepper.
- Source:
# value
Gets and sets the value of the stepper.
- Source:
# width
Sets and gets the width of this component.
- Overrides:
- Source:
# x
Sets and gets the x position of this component.
- Overrides:
- Source:
# y
Sets and gets the y position of this component.
- Overrides:
- Source:
Methods
# addHandler(handler)
Adds a handler function for the "change" event on this numeric stepper.
Parameters:
| Name | Type | Description |
|---|---|---|
handler |
function | A function that will handle the "change" event. |
- Source:
Returns:
This instance, suitable for chaining.
# bind(target, prop)
Automatically changes the value of a property on a target object with the main value of this component changes.
Parameters:
| Name | Type | Description |
|---|---|---|
target |
object | The target object to change. |
prop |
string | The string name of a property on the target object. |
- Source:
Returns:
This instance, suitable for chaining.
# getDecimals()
- Source:
Returns:
the number of decimals or precision used.
# getEnabled()
Gets whether the component is enabled.
- Overrides:
- Source:
Returns:
Whether or not the component is enabled.
# getHeight()
Gets the height of the component.
- Overrides:
- Source:
Returns:
The height of the component.
# getLabel()
- Source:
Returns:
the text in the label.
# getLabelPosition()
- Source:
Returns:
the label position (top, right, left, bottom).
# getMax()
- Source:
Returns:
the maximum value of the stepper.
# getMin()
- Source:
Returns:
the minimum value of the stepper.
# getValue()
- Source:
Returns:
the current value of the stepper.
# getWidth()
Gets the width of the component.
- Overrides:
- Source:
Returns:
The width of the component.
# getX()
Gets the x position of the component.
- Overrides:
- Source:
Returns:
The x position of the component.
# getY()
Gets the y position of the component.
- Overrides:
- Source:
Returns:
The y position of the component.
# move(x, y)
Moves the component to a specified position.
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number | The new x position of the component. |
y |
number | The new y position of the component. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# rotate(rad)
Rotates the component.
Parameters:
| Name | Type | Description |
|---|---|---|
rad |
number | The number of radians to rotate the component by. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# rotateDeg(deg)
Rotates the component.
Parameters:
| Name | Type | Description |
|---|---|---|
deg |
number | The number of degrees to rotate the component by. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# setDecimals(decimals)
Sets the decimals of precision to use.
Parameters:
| Name | Type | Description |
|---|---|---|
decimals |
number | How many decimals of precision will be used. |
- Source:
# setEnabled(enabled)
Sets the enabled state of this component.
Parameters:
| Name | Type | Description |
|---|---|---|
enabled |
boolean | Whether or not the component will be enabled. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# setHeight(height)
Sets the height of this component.
Parameters:
| Name | Type | Description |
|---|---|---|
height |
number | The height of this component. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# setLabel(label)
Sets the height of the stepper. In fact, this component has a fixed height, so this method does nothing.
setHeight() {
return this;
}
/**
Sets the text of this numeric stepper.
Parameters:
| Name | Type | Description |
|---|---|---|
label |
string | The label to set on this numeric stepper. |
- Source:
Returns:
this instance, suitable for chaining.
# setLabelPosition(position)
Sets the position of the text label.
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string | The position to place the text lable: "top" (default), "left", "right" or "bottom". |
- Source:
Returns:
this instance, suitable for chaining.
# setMax(max)
Sets the maximum value of this numeric stepper.
Parameters:
| Name | Type | Description |
|---|---|---|
max |
number | The maximum value of this numeric stepper. |
- Source:
Returns:
This instance, suitable for chaining.
# setMin(min)
Sets the minimum value of this numeric stepper.
Parameters:
| Name | Type | Description |
|---|---|---|
min |
number | The minimum value of this numeric stepper. |
- Source:
Returns:
This instance, suitable for chaining.
# setSize(w, h)
Sizes the component.
Parameters:
| Name | Type | Description |
|---|---|---|
w |
number | The new width of the component. |
h |
number | The new height of the component. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# setValue(value)
Sets the value of this numeric stepper.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | The value of this numeric stepper. |
- Source:
Returns:
This instance, suitable for chaining.
# setValueMinMax(value, min, max)
Sets the value, minimum and maximum of this numeric stepper.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | The value of this numeric stepper. |
min |
number | The minimum value of this numeric stepper. |
max |
number | The maximum value of this numeric stepper. |
- Source:
Returns:
This instance, suitable for chaining.
# setWidth(width)
Sets the width of this component.
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number | The width of this component. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# setX(x)
Sets the x position of this component.
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number | The x position of this component. |
- Overrides:
- Source:
Returns:
This instance, suitable for chaining.
# setY(y)
Sets the y position of this component.
Parameters:
| Name | Type | Description |
|---|---|---|
y |
number | The y position of this component. |
- Overrides:
- Source:
Returns:
this instance, suitable for chaining.