moonstone/IncrementSlider

An interactive numeric range picker with increment decrement

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

Members

IncrementSliderComponent

An IncrementSlider with Moonstone styling and SliderDecorator applied with IconButtons to increment and decrement the value.

By default, IncrementSlider 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 IncrementSlider from '@enact/moonstone/IncrementSlider';

IncrementSliderBaseComponent

A stateless Slider with IconButtons to increment and decrement the value. In most circumstances, you will want to use the stateful version: moonstone/IncrementSlider.IncrementSlider.

import {IncrementSliderBase} from '@enact/moonstone/IncrementSlider';
Properties
active
Boolean

Sets the knob to selected state and allows it to move via 5-way controls.

aria-hidden
Boolean

Prevents read out of both the slider and the increment and decrement buttons.

aria-valuetext
StringNumber

Overrides the aria-valuetext for the slider. By default, aria-valuetext is set to the current value. This should only be used when the parent controls the value of the slider directly through the props.

backgroundProgress
Number

Background progress, as a proportion between 0 and 1.

Default: 0
data-webos-voice-group-label
String

The data-webos-voice-group-label for the IconButton of IncrementSlider.

decrementAriaLabel
String

Sets the hint string read when focusing the decrement button.

Default: 'press ok button to decrease the value'
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 vertical is changed.

disabled
Boolean

Disables the slider and prevents events from firing.

focused
Boolean

Shows the tooltip, when present.

incrementAriaLabel
String

Sets the hint string read when focusing the increment button.

Default: 'press ok button to increase the value'
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 vertical is changed.

knobStep
Number

The amount to increment or decrement the position of the knob via 5-way controls.

If not specified, step is used for the default value.

max
Number

The maximum value of the increment slider.

Default: 100
min
Number

The minimum value of the increment slider.

Default: 0
noFill
Boolean

Hides the slider bar fill and prevents highlight when spotted.

onActivate
Function

Called when the knob is activated or deactivated by selecting it via 5-way.

onChange
Function

Called when the value is changed.

onSpotlightDisappear
Function

Called when the component is removed while retaining focus.

onSpotlightDown
Function

Called prior to focus leaving the component when the 5-way down key is pressed.

onSpotlightLeft
Function

Called prior to focus leaving the component when the 5-way left key is pressed.

onSpotlightRight
Function

Called prior to focus leaving the component when the 5-way right key is pressed.

onSpotlightUp
Function

Called prior to focus leaving the component when the 5-way up key is pressed.

orientation
String

Sets the orientation of the slider, whether the slider moves left and right or up and down. Must be either 'horizontal' or 'vertical'.

Default: 'horizontal'
spotlightDisabled
Boolean

Disables spotlight navigation into the component.

step
Number

The amount to increment or decrement the value.

Default: 1
tooltip
BooleanElementFunction

Enables the built-in tooltip

To customize the tooltip, pass either a custom Tooltip component or an instance of IncrementSliderTooltip with additional props configured.

<IncrementSlider
  tooltip={
    <IncrementSliderTooltip percent side="after" />
  }
/>

The tooltip may also be passed as a child via the "tooltip" slot. See Slottable for more information on how slots can be used.

<IncrementSlider>
  <IncrementSliderTooltip percent side="after" />
</IncrementSlider>
value
Number

The value of the increment slider.

Defaults to the value of min.

IncrementSliderTooltipComponent

import {IncrementSliderTooltip} from '@enact/moonstone/IncrementSlider';
ArrayBooleanFunctionModuleNumberObjectString