moonstone/ Slider
Exports the moonstone/Slider.Slider component.
import Slider from '@enact/moonstone/Slider';
Members
SliderComponent
moonstone/Slider.Slider is a Slider with Moonstone styling, Spottable, Pressable and SliderDecorator applied.
By default, Slider
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 Slider from '@enact/moonstone/Slider';
SliderBaseComponent
moonstone/Slider.SliderBase is a stateless Slider. In most circumstances, you will want to use the stateful version: moonstone/Slider.Slider
import {SliderBase} from '@enact/moonstone/Slider';
Properties
- activateOnFocus
When
true
, the component may be manipulated via the directional input keys upon receiving focus.- 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.- 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, if present, is shown- max
The maximum value of the slider.
Default: 100- min
The minimum value of the 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.
- onKnobMove
The handler to run when the knob moves. This method is only called when running
Slider
withdetachedKnob
. If you need to run a callback without a detached knob use the more traditionalonChange
property.- onMouseMove
The handler to run when the mouse is moved across the slider.
- pressed
When
true
, a pressed visual effect is applied- 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.- 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.
- 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 the tooltipForceSide prop.Default: 'before'- value
The value of the slider.
Default: 0- vertical
If
true
the slider will be oriented vertically.
SliderTooltipComponent
moonstone/Slider.SliderTooltip is a stateless Tooltip specifically for Slider.
import {SliderTooltip} from '@enact/moonstone/Slider';
Properties
- forceSide
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.- proportion
The proportion of progress across the bar. Should be a number between 0 and 1.
Default: 0- side
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 the tooltipForceSide prop.Default: 'before'- vertical
If
true
the slider will be oriented vertically.