HexagonJS
Edit Page
Number Picker
A number picker component - for picking an integer value.
Examples

HTML

<div id="number-picker-1"></div>
<div id="number-picker-2"></div>
<div id="number-picker-3"></div>

JavaScript

var numPicker1 = new hx.NumberPicker('#number-picker-1');
var numPicker2 = new hx.NumberPicker('#number-picker-2', {buttonClass: 'hx-positive'});
var numPicker3 = new hx.NumberPicker('#number-picker-3', {buttonClass: 'hx-info'});

numPicker1.value(50);
numPicker2.value(1050);

numPicker3
  .value(-1)
  .min(0)
  .max(10);
Api
Prototypes
hx.NumberPickerextendsEventEmitter
A prototype used to create number pickers.
Constructors
hx.NumberPickerselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The element or CSS selector string that uniquely identifies the element to initialise the number picker into
options
The options that can be configured for the number picker component
Properties
buttonClassString
The button class to apply to the number picker buttons
disabledBoolean
Whether the number picker should be disabled
Default: false
incrementDelayNumber
The delay between increments whilst pressing and holding the number picker buttons
Default: 50
incrementOnHoldBoolean
Whether pressing and holding the button should increment the number picker until releasing the button
Default: true
The maximum number the number picker can have
The minimum number the number picker can have
Events
changeNumber
Called when the value is changed. The data with the event is the new value of the number picker
decrement
Called when the value is decremented
increment
Called when the value is incremented
input-changeNumber
Called when the input value is changed. The data with the event is the new value of the number picker
Methods
decrementNumberPicker
Decreases the value by 1
Returns
NumberPicker
This NumberPicker
disabledvalueBooleanNumberPicker
A method for disabling or enabling a number picker
Arguments
valueBoolean
Whether the number picker should be disabled
Returns
NumberPicker
This number picker
disabledBoolean
A method for getting the disabled state of a number picker
Returns
Whether the number picker is disabled
incrementNumberPicker
Increases the value by 1
Returns
NumberPicker
This NumberPicker
maxvalueNumberNumberPicker
Sets the maximum value the number picker can have
Arguments
valueNumber
The maximum value the number picker can have
Returns
NumberPicker
This NumberPicker
Gets the maximum value the number picker can have
Returns
The max value for the current number picker.
minvalueNumberNumberPicker
Sets the minimum value the number picker can have
Arguments
valueNumber
The minimum value the number picker can have
Returns
NumberPicker
This NumberPicker
Gets the minimum value the number picker can have
Returns
The min value for the current number picker.
valuevalueNumberscreenValueNumber / StringNumberPicker
Sets the current value of the number picker
Arguments
valueNumber
The numberic value to set the value to
screenValueNumber / String
The number to display in the number picker, for use in conjunction with localisation
Returns
NumberPicker
This NumberPicker
valueNumber
Gets the current value of the number picker
Returns
Functions
hx.numberPickeroptionsObjectSelection
Creates a new NumberPicker set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing NumberPicker
Returns
Selection
A selection containing an element with an NumberPicker initialised on it