ui/Slider
Unstyled slider components and behaviors to be customized by a theme or application.
Members
Section titled “Members ”Slider Component
Section titled “Slider   Component ”A minimally-styled slider component with touch and drag support.
Extends:
ui/Sliderui/Slider.SliderBase
Wrapped with:
ui/Sliderui/Slider.SliderDecorator
Properties
onChange
Section titled “onChange”Called when the value is changed.
Knob Component
Section titled “Knob   Component ”An unstyled, knob component to be used with a Slider.
Properties
orientation
Section titled “orientation”The orientation of the slider, either "horizontal" or "vertical".
proportion
Section titled “proportion”A number between 0 and 1 representing the proportion of the value in terms of min
and max props of the slider.
Adds a tooltip to the knob using the provided component.
The following props are forwarded to the tooltip:
children- Thevalueprop from the sliderorientation- The value of theorientationprop from the sliderproportion- The value of theproportionprop 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.
The value of the slider.
Default: 0SliderBase Component
Section titled “SliderBase   Component ”An unstyled, sliding range-selection component.
Properties
Required Property • progressBarComponent
Section titled “Required Property • progressBarComponent”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
backgroundProgressorientation - The value of
orientationprogress - The
valueas a proportion betweenminandmaxprogressAnchor - 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
Section titled “backgroundProgress”Background progress, as a proportion between 0 and 1.
colorPicker
Section titled “colorPicker”Indicates if Slider will be used as a colorPicker.
Default: falseCalled with a reference to the root component.
When using ui/Sliderui/Slider.Slider, the ref prop is forwarded to this component
as componentRef.
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 classknob- The knob nodehorizontal- Applied whenorientationprop is `"horizontal"``pressed- Applied whenpressedprop istruenoFill- Applied whennoFillprop istruevertical- Applied whenorientationprop is"vertical"
disabled
Section titled “disabled”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/Sliderui/Slider.Knob.
The following props are forwarded to the knob:
className- Aknobclass applied by the sliderdisabled- The value ofdisabledorientation- The value oforientationproportion- Thevalueas a proportion betweenminandmaxtooltipComponent- The value oftooltipComponentvalue- 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.
The maximum value of the slider.
The range between min and max should be evenly divisible by
ui/Sliderui/Slider.SliderBase.step.
The minimum value of the slider.
The range between min and max should be evenly divisible by
ui/Sliderui/Slider.SliderBase.step.
Adds a child component to the slider which should show the min and max values.
noFill
Section titled “noFill”Applies the style where the slider bar does not display filled.
Default: falseorientation
Section titled “orientation”The orientation of the slider.
Allowed values include:
'horizontal'- A left and right orientation'vertical'- An up and down orientation
pressed
Section titled “pressed”Applies a pressed visual effect.
progressAnchor
Section titled “progressAnchor”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.
The amount to increment or decrement the value.
It must evenly divide into the range designated by min and max.
Adds a tooltip to the slider using the provided component.
The following props are forwarded to the tooltip:
children- Thevalueprop from the sliderorientation- The value of theorientationprop from the sliderproportion- Thevalueas a proportion betweenminandmax
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.
The value of the slider.
Defaults to the value of min.
SliderDecorator Higher-Order Component
Section titled “SliderDecorator   Higher-Order Component ”Adds touch and drag support to a ui/Sliderui/Slider.SliderBase.
Includes:
ui/Changeableui/Changeable.Changeable
Includes:
ui/Touchableui/Touchable.Touchable