enact logoEnact
Edit on GitHub

moonstone/Slider

Provides Moonstone-themed slider components and behaviors.

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

Members

SliderComponent

Slider input with Moonstone styling, Spottable, Touchable 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';
Properties
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.

SliderBaseComponent

Range-selection input component.

import {SliderBase} from '@enact/moonstone/Slider';
Properties
activateOnFocus
Boolean

Activates the component when focused so that it may be manipulated via the directional input keys.

active
Boolean

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

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

  • slider - The root component class

focused
Boolean

Indicates that the slider has gained focus and if the tooltip is present, it will be shown.

knobStep
Number

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 and max. If not specified, step is used for the default value.

max
Number

The maximum value of the slider.

The range between min and max should be evenly divisible by step.

Default: 100
min
Number

The minimum value of the slider.

The range between min and max should be evenly divisible by step.

Default: 0
onActivate
Function

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

onKeyDown
Function

Called when a key is pressed down while the slider is focused.

When a directional key is pressed down and the knob is active (either by first pressing enter or when activateOnFocus is enabled), the Slider will increment or decrement the current value and emit an onChange event. This default behavior can be prevented by calling preventDefault() on the event passed to this callback.

onKeyUp
Function

Called when a key is released while the slider is focused.

When the enter key is released and activateOnFocus is not enabled, the slider will be activated to enable incrementing or decrementing the value via directional keys. This default behavior can be prevented by calling preventDefault() on the event passed to this callback.

step
Number

The amount to increment or decrement the value.

It must evenly divide into the range designated by min and max.

Default: 1
tooltip
BooleanElementFunction

Enables the built-in tooltip

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

<Slider
  tooltip={
    <SliderTooltip 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.

<Slider>
  <SliderTooltip percent side="after" />
</Slider>

If a custom tooltip is provided, it will receive the following props:

  • children - The value prop from the slider

  • visible - true if the tooltip should be displayed

  • orientation - The value of the orientation prop from the slider

  • proportion - A number between 0 and 1 representing the proportion of the value in terms of min and max

value
Number

The value of the slider.

Defaults to the value of min.

SliderDecoratorHigher-Order Component

Moonstone-specific slider behaviors to apply to SliderBase.

import {SliderDecorator} from '@enact/moonstone/Slider';

SliderTooltipComponent

A Tooltip specifically adapted for use with IncrementSlider, ProgressBar, or Slider.

See: moonstone/ProgressBar.ProgressBarTooltip
import {SliderTooltip} from '@enact/moonstone/Slider';
ArrayBooleanFunctionModuleNumberObjectString