moonstone/ Increment Slider
Exports the moonstone/IncrementSlider.IncrementSlider component.
import IncrementSlider from '@enact/moonstone/IncrementSlider';
Members
IncrementSliderComponent
moonstone/IncrementSlider.IncrementSlider is 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
moonstone/IncrementSlider.IncrementSliderBase is 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
When
true
, the knob displays selected and can be moved using 5-way controls.- aria-valuetext
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
Background progress, as a proportion between
0
and1
.Default: 0- children
The custom value or component for the tooltip. If tooltip, is
true
, then it will use built-in tooltip with given a string. Iffalse
, a custom tooltip component, which follows the knob, may be used instead.- decrementIcon
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.
- detachedKnob
The slider can change its behavior to have the knob follow the cursor as it moves across the slider, without applying the position. A click or drag behaves the same. This is primarily used by media playback. Setting this to
true
enables this behavior.- disabled
When
true
, the component is shown as disabled and does not generate events- focused
When
true
, the tooltip is shown when present- incrementIcon
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.
- max
The maximum value of the increment slider.
Default: 100- min
The minimum value of the increment slider.
Default: 0- noFill
When
true
, the slider bar doesn't show a fill and doesn't highlight when spotted- onActivate
The handler when the knob is activated or deactivated by selecting it via 5-way
- onChange
The handler to run when the value is changed.
- onDecrement
The handler to run when the value is decremented.
- onIncrement
The handler to run when the value is incremented.
- onSpotlightDisappear
The handler to run when the component is removed while retaining focus.
- onSpotlightDown
The handler to run prior to focus leaving the component when the 5-way down key is pressed.
- onSpotlightLeft
The handler to run prior to focus leaving the component when the 5-way left key is pressed.
- onSpotlightRight
The handler to run prior to focus leaving the component when the 5-way right key is pressed.
- onSpotlightUp
The handler to run prior to focus leaving the component when the 5-way up key is pressed.
- scrubbing
scrubbing
only has an effect with a detachedKnob, and is a performance optimization to not allow re-assignment of the knob's value (and therefore position) during direct user interaction.- spotlightDisabled
When
true
, the component cannot be navigated using spotlight.- step
The amount to increment or decrement the value.
Default: 1- tooltip
Enables the built-in tooltip, whose behavior can be modified by the other tooltip properties. A custom tooltip, which follows the knob, may be used instead by supplying a component as a child of
IncrementSlider
. This property has no effect if a custom tooltip is provided.- tooltipAsPercent
Converts the contents of the built-in tooltip to a percentage of the bar. The percentage respects the min and max value props.
- tooltipForceSide
Setting to
true
overrides the natural LTR->RTL tooltip side-flipping for locale changes forvertical
sliders. This may be useful if you have a static layout that does not automatically reverse when in an RTL language.- tooltipSide
Specify where the tooltip should appear in relation to the Slider bar. Options are
'before'
and'after'
.before
renders above ahorizontal
slider and to the left of avertical
Slider.after
renders below ahorizontal
slider and to the right of avertical
Slider. In thevertical
case, the rendering position is automatically reversed when rendering in an RTL locale. This can be overridden by using thetooltipForceSide prop.Default: 'before'- value
The value of the increment slider.
Default: 0- vertical
If
true
the increment slider will be oriented vertically.