ui/Slider

Unstyled slider components and behaviors to be customized by a theme or application.

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

Members

SliderComponent

A minimally-styled slider component with touch and drag support.

import Slider from '@enact/ui/Slider';
Properties
onChange
Function

Called when the value is changed.

KnobComponent

An unstyled, knob component to be used with a Slider.

import {Knob} from '@enact/ui/Slider';
Properties
orientation
String

The orientation of the slider, either "horizontal" or "vertical".

Default: "horizontal"
proportion
Boolean

A number between 0 and 1 representing the proportion of the value in terms of min and max props of the slider.

tooltipComponent
FunctionElement

Adds a tooltip to the knob using the provided component.

The following props are forwarded to the tooltip:

  • children - The value prop from the slider

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

  • proportion - The value of the proportion prop from the knob

This prop accepts either a Component (e.g. MyTooltip} which will be instantiated with the above props or a component instance (e.g. <MyTooltip customProp="value" />) which will have its props merged with the above props.

value
Number

The value of the slider.

Default: 0

SliderBaseComponent

An unstyled, sliding range-selection component.

import {SliderBase} from '@enact/ui/Slider';
Properties
progressBarComponent
FunctionElement

The component used to render the progress bar within the slider.

The provided component will receive the following props from Slider

  • backgroundProgress - The value of backgroundProgress

  • orientation - The value of orientation

  • progress - The value as a proportion between min and max

  • progressAnchor - The value of progressAnchor

This prop accepts either a Component (e.g. MyProgress} which will be instantiated with the above props or a component instance (e.g. <MyProgress customProp="value" />) which will have its props merged with the above props.

backgroundProgress
Number

Background progress, as a proportion between 0 and 1.

Default: 0
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

  • knob - The knob node

  • horizontal - Applied when orientation prop is `"horizontal"

  • pressed - Applied when pressed prop is true

  • noFill - Applied when noFill prop is true

  • vertical - Applied when orientation prop is "vertical"

disabled
Boolean

Disables component and does not generate events.

Default: false
knobComponent
FunctionElement

Defines a custom knob component for the slider.

By default, Slider will use its own implementation, ui/Slider.Knob.

The following props are forwarded to the knob:

  • className - A knob class applied by the slider

  • disabled - The value of disabled

  • orientation - The value of orientation

  • proportion - The value as a proportion between min and max

  • tooltipComponent - The value of tooltipComponent

  • value - The value of value

This prop accepts either a Component (e.g. MyKnob} which will be instantiated with the above props or a component instance (e.g. <MyKnob customProp="value" />) which will have its props merged with the above props.

Default: {@link ui/Slider.Knob}
max
Number

The maximum value of the slider.

Default: 100
min
Number

The minimum value of the slider.

Default: 0
noFill
Boolean

Applies the style where the slider bar does not display filled.

Default: false
orientation
String

The orientation of the slider, either "horizontal" or "vertical".

Default: "horizontal"
pressed
Boolean

Applies a pressed visual effect.

progressAnchor
Number

Sets the point, as a proportion between 0 and 1, from which the slider is filled.

Applies to both the slider's value and backgroundProgress. In both cases, setting the value of progressAnchor will cause the slider to fill from that point down, when value or backgroundProgress is proportionally less than the anchor, or up, when value or backgroundProgress is proportionally greater than the anchor, rather than always from the start of the slider.

Default: 0
step
Number

The amount to increment or decrement the value.

Default: 1
tooltipComponent
FunctionElement

Adds a tooltip to the slider using the provided component.

The following props are forwarded to the tooltip:

  • children - The value prop from the slider

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

  • proportion - The value as a proportion between min and max

This prop accepts either a Component (e.g. MyTooltip} which will be instantiated with the above props or a component instance (e.g. <MyTooltip customProp="value" />) which will have its props merged with the above props.

value
Number

The value of the slider.

Defaults to the value of min.

SliderDecoratorHigher-Order Component

Adds touch and drag support to a SliderBase.

import {SliderDecorator} from '@enact/ui/Slider';
ArrayBooleanFunctionModuleNumberObjectString