limestone/RangePicker

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

Loading Live Preview

Import Usage

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

Members

RangePicker   Component

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 Usage

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

Wrapped with: ui/Changeableui/Changeable.Changeable

Properties

defaultValue

Number

Default value

RangePickerBase   Component

RangePicker base component.

Import Usage

import {RangePickerBase} from '@enact/limestone/RangePicker';

Properties

Required Property •  max

Number

The maximum value selectable by the picker (inclusive).

The range between min and max should be evenly divisible by limestone/RangePickerlimestone/RangePicker.RangePickerBase.step.

---

Required Property •  min

Number

The minimum value selectable by the picker (inclusive).

The range between min and max should be evenly divisible by limestone/RangePickerlimestone/RangePicker.RangePickerBase.step.

---

Required Property •  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.

---

changedBy

'enter''arrow'

Determines which key to adjust the picker's value for the joined horizontal one.

• 'enter' allows the user to use the enter key to adjust the picker's value

• 'arrow' allows the user to use the left or right keys to adjust the picker's value.

The default value for joined horizontal picker is 'enter'. If limestone/RangePickerlimestone/RangePicker.RangePickerBase.orientation is 'vertical' or limestone/RangePickerlimestone/RangePicker.RangePickerBase.joined is undefined or is false, this prop is ignored.

---

children

Node

Children from which to pick.

---

className

String

Class name for component.

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• title - The title component class

• inlineTitle - The title component class when inlineTitle is true

---

decrementIcon

string

A custom icon for the decrementer.

All strings supported by limestone/Iconlimestone/Icon.Icon are supported. Without a custom icon, the default is used, and is automatically changed when the limestone/RangePickerlimestone/RangePicker.RangePickerBase.orientation is changed.

---

disabled

Boolean

Disables the picker.

---

incrementIcon

String

A custom icon for the incrementer.

All strings supported by limestone/Iconlimestone/Icon.Icon are supported. Without a custom icon, the default is used, and is automatically changed when the limestone/RangePickerlimestone/RangePicker.RangePickerBase.orientation is changed.

---

inlineTitle

Boolean

Applies inline styling to the title.

---

joined

Boolean

Allows the user can use the arrow keys or enter key 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

'horizontal''vertical'

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

---

title

String

The primary text of the Picker.

---

width

'small''medium''large'Number

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.