moonstone/IncrementSlider

Properties

active

Boolean

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

aria-hidden

Boolean

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

data-webos-voice-disabled

Boolean

Disables voice control.

data-webos-voice-group-label

String

The data-webos-voice-group-label for the IconButton of IncrementSlider.

decrementAriaLabel

String

Sets the hint string read when focusing the decrement button.

Default: 'press ok button to decrease the value'

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.

disabled

Boolean

Disables the slider and prevents events from firing.

focused

Boolean

Shows the tooltip, when present.

incrementAriaLabel

String

Sets the hint string read when focusing the increment button.

Default: 'press ok button to increase the value'

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.

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 increment slider.

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

Default: 100

min

Number

The minimum value of the increment slider.

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

Default: 0

noFill

Boolean

Hides the slider bar fill and prevents highlight when spotted.

onActivate

Function

Called when the knob is activated or deactivated by selecting it via 5-way.

onChange

Function

Called when the value is changed.

onSpotlightDisappear

Function

Called when the component is removed while retaining focus.

onSpotlightDown

Function

Called prior to focus leaving the component when the 5-way down key is pressed.

onSpotlightLeft

Function

Called prior to focus leaving the component when the 5-way left key is pressed.

onSpotlightRight

Function

Called prior to focus leaving the component when the 5-way right key is pressed.

onSpotlightUp

Function

Called prior to focus leaving the component when the 5-way up key is pressed.

orientation

String

Sets the orientation of the slider, whether the slider moves left and right or up and down. Must be either 'horizontal' or 'vertical'.

Default: 'horizontal'

spotlightDisabled

Boolean

Disables spotlight navigation into the component.

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 IncrementSliderTooltip with additional props configured.

<IncrementSlider
  tooltip={
    <IncrementSliderTooltip 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.

<IncrementSlider>
  <IncrementSliderTooltip percent side="after" />
</IncrementSlider>

value

Number

The value of the increment slider.

Defaults to the value of min.