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
Called when the value is changed.
KnobComponent
An unstyled, knob component to be used with a Slider
.
import {Knob} from '@enact/ui/Slider';
Properties
The orientation of the slider, either
"horizontal"
or"vertical"
.Default: "horizontal"A number between 0 and 1 representing the proportion of the
value
in terms ofmin
andmax
props of the slider.Adds a tooltip to the knob using the provided component.
The following props are forwarded to the tooltip:
children
- Thevalue
prop from the sliderorientation
- The value of theorientation
prop from the sliderproportion
- The value of theproportion
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.See: ui/ComponentOverrideThe value of the slider.
Default: 0
SliderBaseComponent
An unstyled, sliding range-selection component.
import {SliderBase} from '@enact/ui/Slider';
Properties
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 betweenmin
andmax
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.Background progress, as a proportion between
0
and1
.Default: 0Customizes 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 classknob
- The knob nodehorizontal
- Applied whenorientation
prop is `"horizontal"pressed
- Applied whenpressed
prop istrue
noFill
- Applied whennoFill
prop istrue
vertical
- Applied whenorientation
prop is"vertical"
Disables component and does not generate events.
Default: falseDefines 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
- Aknob
class applied by the sliderdisabled
- The value ofdisabled
orientation
- The value oforientation
proportion
- Thevalue
as a proportion betweenmin
andmax
tooltipComponent
- The value oftooltipComponent
value
- The value ofvalue
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.See: ui/ComponentOverrideDefault: {@link ui/Slider.Knob}The maximum value of the slider.
The range between
min
andmax
should be evenly divisible by step.Default: 100The minimum value of the slider.
The range between
min
andmax
should be evenly divisible by step.Default: 0Applies the style where the slider bar does not display filled.
Default: falseThe orientation of the slider, either
"horizontal"
or"vertical"
.Default: "horizontal"Applies a pressed visual effect.
Sets the point, as a proportion between 0 and 1, from which the slider is filled.
Applies to both the slider's
value
andbackgroundProgress
. In both cases, setting the value ofprogressAnchor
will cause the slider to fill from that point down, whenvalue
orbackgroundProgress
is proportionally less than the anchor, or up, whenvalue
orbackgroundProgress
is proportionally greater than the anchor, rather than always from the start of the slider.Default: 0The amount to increment or decrement the value.
It must evenly divide into the range designated by
min
andmax
.Default: 1Adds a tooltip to the slider using the provided component.
The following props are forwarded to the tooltip:
children
- Thevalue
prop from the sliderorientation
- The value of theorientation
prop from the sliderproportion
- Thevalue
as a proportion betweenmin
andmax
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.See: ui/ComponentOverrideThe 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';