Enact

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
Boolean

When true, the component may be manipulated via the directional input keys upon receiving focus.

active
Boolean

When true, the knob displays selected and can be moved using 5-way controls.

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
children
StringNode

The custom value or component for the tooltip. If tooltip, is true, then it will use built-in tooltip with given a string. If false, a custom tooltip component, which follows the knob, may be used instead.

detachedKnob
Boolean

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
Boolean

When true, the component is shown as disabled and does not generate events

focused
Boolean

When true, the tooltip, if present, is shown

max
Number

The maximum value of the slider.

Default: 100
min
Number

The minimum value of the slider.

Default: 0
noFill
Boolean

When true, the slider bar doesn't show a fill and doesn't highlight when spotted

onActivate
Function

The handler when the knob is activated or deactivated by selecting it via 5-way

onChange
Function

The handler to run when the value is changed.

onDecrement
Function

The handler to run when the value is decremented.

onIncrement
Function

The handler to run when the value is incremented.

onKnobMove
Function

The handler to run when the knob moves. This method is only called when running Slider with detachedKnob. If you need to run a callback without a detached knob use the more traditional onChange property.

onMouseMove
Function

The handler to run when the mouse is moved across the slider.

pressed
Boolean

When true, a pressed visual effect is applied

scrubbing
Boolean

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
Number

The amount to increment or decrement the value.

Default: 1
tooltip
Boolean

Enables the built-in tooltip, whose behavior can be modified by the other tooltip properties.

tooltipAsPercent
Boolean

Converts the contents of the built-in tooltip to a percentage of the bar. The percentage respects the min and max value props.

tooltipForceSide
Boolean

Setting to true overrides the natural LTR->RTL tooltip side-flipping for locale changes for vertical sliders. This may be useful if you have a static layout that does not automatically reverse when in an RTL language.

tooltipSide
String

Specify where the tooltip should appear in relation to the Slider bar. Options are 'before' and 'after'. before renders above a horizontal slider and to the left of a vertical Slider. after renders below a horizontal slider and to the right of a vertical Slider. In the vertical 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
Number

The value of the slider.

Default: 0
vertical
Boolean

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
Boolean

Setting to true overrides the natural LTR->RTL tooltip side-flipping for locale changes for vertical sliders. This may be useful if you have a static layout that does not automatically reverse when in an RTL language.

proportion
Number

The proportion of progress across the bar. Should be a number between 0 and 1.

Default: 0
side
String

Specify where the tooltip should appear in relation to the Slider bar. Options are 'before' and 'after'. before renders above a horizontal slider and to the left of a vertical Slider. after renders below a horizontal slider and to the right of a vertical Slider. In the vertical 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
Boolean

If true the slider will be oriented vertically.

ArrayBooleanFunctionModuleNumberObjectString