Enact

moonstone/IncrementSlider

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

Members

IncrementSliderComponent

moonstone/IncrementSlider.IncrementSlider is an IncrementSlider with Moonstone styling and SliderDecorator applied with IconButtons to increment and decrement the value.

By default, IncrementSlider 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 IncrementSlider from '@enact/moonstone/IncrementSlider';

IncrementSliderBaseComponent

moonstone/IncrementSlider.IncrementSliderBase is a stateless Slider with IconButtons to increment and decrement the value. In most circumstances, you will want to use the stateful version: moonstone/IncrementSlider.IncrementSlider

import {IncrementSliderBase} from '@enact/moonstone/IncrementSlider';
Properties
active
Boolean

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

aria-hidden
Boolean

When true, prevents read out of both the slider and the increment and decrement buttons.

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.

decrementIcon
String

Assign a custom icon for the decrementer. All strings supported by {Icon} are supported. Without a custom icon, the default is used, and is automatically changed when vertical is changed.

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 is shown when present

incrementIcon
String

Assign a custom icon for the incrementer. All strings supported by {Icon} are supported. Without a custom icon, the default is used, and is automatically changed when vertical is changed.

max
Number

The maximum value of the increment slider.

Default: 100
min
Number

The minimum value of the increment 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.

onSpotlightDisappear
Function

The handler to run when the component is removed while retaining focus.

onSpotlightDown
Function

The handler to run prior to focus leaving the component when the 5-way down key is pressed.

onSpotlightLeft
Function

The handler to run prior to focus leaving the component when the 5-way left key is pressed.

onSpotlightRight
Function

The handler to run prior to focus leaving the component when the 5-way right key is pressed.

onSpotlightUp
Function

The handler to run prior to focus leaving the component when the 5-way up key is pressed.

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.

spotlightDisabled
Boolean

When true, the component cannot be navigated using spotlight.

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. A custom tooltip, which follows the knob, may be used instead by supplying a component as a child of IncrementSlider. This property has no effect if a custom tooltip is provided.

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 thetooltipForceSide prop.

Default: 'before'
value
Number

The value of the increment slider.

Default: 0
vertical
Boolean

If true the increment slider will be oriented vertically.

ArrayBooleanFunctionModuleNumberObjectString