Enact

moonstone/RangePicker

import RangePicker from '@enact/moonstone/RangePicker';

Members

RangePickerComponent

moonstone/RangePicker.RangePicker is a component that lets the user select a number from a range of numbers.

By default, RangePicker maintains the state of its value property. Supply the defaultValue property to control its initial value. If you wish to directly control updates to the component, supply a value to value at creation time and update it in response to onChange events.

import RangePicker from '@enact/moonstone/RangePicker';

RangePickerBaseComponent

moonstone/RangePicker.RangePickerBase is a component that lets the user select a number from a range of numbers. This version is not spottable. Developers are encouraged to use moonstone/RangePicker.RangePicker.

import {RangePickerBase} from '@enact/moonstone/RangePicker';
Properties
aria-valuetext
String

Overrides the aria-valuetext for the picker. By default, aria-valuetext is set to the current selected child value.

children
Node

Children from which to pick

className
String

Class name for component

decrementIcon
string

Assign a custom icon for the decrementer. All strings supported by {Icon} are supported. Without a custom icon, the default is used, and is automatically changed when the {Icon#orientation} is changed.

disabled
Boolean

When true, the RangePicker is shown as disabled and does not generate onChange {@glossary event}.

incrementIcon
string

Assign a custom icon for the incrementer. All strings supported by {Icon} are supported. Without a custom icon, the default is used, and is automatically changed when the {Icon#orientation} is changed.

joined
Boolean

Determines the user interaction of the control. A joined picker allows the user to use the arrow keys to adjust the picker's value. The user may no longer use those arrow keys to navigate, while this control is focused. A split control allows full navigation, but requires individual ENTER presses on the incrementer and decrementer buttons. Pointer interaction is the same for both formats.

max
Number

The maximum value selectable by the picker (inclusive).

min
Number

The minimum value selectable by the picker (inclusive).

noAnimation
Boolean

By default, the picker will animate transitions between items if it has a defined width. Specifying noAnimation will prevent any transition animation for the component.

onChange
Function

A function to run when the control should increment or decrement.

orientation
String

Sets the orientation of the picker, whether the buttons are above and below or on the sides of the value. Must be either 'horizontal' or 'vertical'.

Default: 'horizontal'
padded
Boolean

When true, pads the display value with zeros up to the number of digits of the value of min or max`, whichever is greater.

step
Number

Allow the picker to only increment or decrement by a given value. A step of 2 would cause a picker to increment from 10 to 12 to 14, etc.

Default: 1
value
Number

Current value

width
StringNumber

Choose a specific size for your picker. 'small', 'medium', 'large', or set to null to assume auto-sizing. 'small' is good for numeric pickers, 'medium' for single or short word pickers, 'large' for maximum-sized pickers.

You may also supply a number. This number will determine the minumum size of the Picker. Setting a number to less than the number of characters in your longest value may produce unexpected results.

wrap
Boolean

Should the picker stop incrementing when the picker reaches the last element? Set wrap to true to allow the picker to continue from the opposite end of the list of options.

ArrayBooleanFunctionModuleNumberObjectString