enact logoEnact
Edit on GitHub

moonstone/RangePicker

A component for selecting a number from a range of numbers.

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

Members

RangePickerComponent

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';
Properties
defaultValue
Number

Default value

RangePickerBaseComponent

RangePicker base component.

import {RangePickerBase} from '@enact/moonstone/RangePicker';
Properties
max •
Number

The maximum value selectable by the picker (inclusive).

The range between min and max should be evenly divisible by step.

min •
Number

The minimum value selectable by the picker (inclusive).

The range between min and max should be evenly divisible by step.

value •
Number

Current value.

aria-valuetext
String

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

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 orientation is changed.

disabled
Boolean

Disables the picker.

incrementIcon
String

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 orientation is changed.

joined
Boolean

Allows the user can 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 default control allows full navigation, but requires individual ENTER presses on the incrementer and decrementer buttons. Pointer interaction is the same for both formats.

noAnimation
Boolean

Disables animation.

By default, the picker will animate transitions between items, provided a width is defined.

onChange
Function

Called when value changes.

orientation
String

Orientation of the picker.

Controls whether the buttons are arranged horizontally or vertically around the value.

  • Values: 'horizontal', 'vertical'

Default: 'horizontal'
padded
Boolean

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

step
Number

The smallest value change allowed for the picker.

For example, a step of 2 would cause the picker to increment from 0 to 2 to 4, etc. It must evenly divide into the range designated by min and max.

Default: 1
width
StringNumber

The width of the picker.

A number can be used to set the minimum number of characters to be shown. Setting a number to less than the number of characters in the longest value will cause the width to grow for the longer values.

A string can be used to select from pre-defined widths:

  • 'small' - numeric values

  • 'medium' - single or short words

  • 'large' - maximum-sized pickers taking full width of its parent

By default, the picker will size according to the longest valid value.

wrap
Boolean

Allows picker to continue from the start of the list after it reaches the end and vice-versa.

ArrayBooleanFunctionModuleNumberObjectString