moonstone/ Increment Slider
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
Sets the knob to selected state and allows it to move via 5-way controls.
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.Background progress, as a proportion between
0
and1
.Default: 0Disables voice control.
The
data-webos-voice-group-label
for the IconButton of IncrementSlider.Sets the hint string read when focusing the decrement button.
Default: 'press ok button to decrease the value'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.
Disables the slider and prevents events from firing.
Shows the tooltip, when present.
Sets the hint string read when focusing the increment button.
Default: 'press ok button to increase the value'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.
The amount to increment or decrement the position of the knob via 5-way controls.
It must evenly divide into the range designated by
min
andmax
. If not specified,step
is used for the default value.The maximum value of the increment slider.
The range between
min
andmax
should be evenly divisible by step.Default: 100The minimum value of the increment slider.
The range between
min
andmax
should be evenly divisible by step.Default: 0Hides the slider bar fill and prevents highlight when spotted.
Called when the knob is activated or deactivated by selecting it via 5-way.
Called when the value is changed.
Called when the component is removed while retaining focus.
Called prior to focus leaving the component when the 5-way down key is pressed.
Called prior to focus leaving the component when the 5-way left key is pressed.
Called prior to focus leaving the component when the 5-way right key is pressed.
Called prior to focus leaving the component when the 5-way up key is pressed.
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'Disables spotlight navigation into the component.
The amount to increment or decrement the value.
It must evenly divide into the range designated by
min
andmax
.Default: 1Enables 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>
The value of the increment slider.
Defaults to the value of
min
.
IncrementSliderTooltipComponent
A Tooltip specifically adapted for use with IncrementSlider, ProgressBar, or Slider.
import {IncrementSliderTooltip} from '@enact/moonstone/IncrementSlider';