sandstone/Slider

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.

Activates the component when selected so that it may be manipulated via the directional input keys.

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

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

Disables component and does not generate events.

Indicates that the slider has gained focus and if the tooltip is present, it will be shown.

Controls the keydown frequency with which the acceleration will "freeze". While frozen, the value of the slider is not changed via arrow key.

To customize the key acceleration speed, pass an array for frequency. Each number represents a number of an event for sampling. For example, 1 means to process all events while 3 means to process one of the three events. If the number is large, the slider value changes slowly. Example for accelerating:

keyFrequency={[3, 3, 3, 2, 2, 2, 1]}

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.

The maximum value of the slider.

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

The minimum value of the slider.

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

Disable wheel event.

The handler when the knob is activated or deactivated by selecting it via 5-way

Called when a key is pressed down while the slider is focused.

When a directional key is pressed down and the knob is active (either by first pressing enter or when activateOnSelect is disabled), the Slider will increment or decrement the current value and emit an onChange event. This default behavior can be prevented by calling preventDefault() on the event passed to this callback.

Called when a key is released while the slider is focused.

When the enter key is released and activateOnSelect is enabled, the slider will be activated to enable incrementing or decrementing the value via directional keys. This default behavior can be prevented by calling preventDefault() on the event passed to this callback.

Displays an anchor at progressAnchor.

The amount to increment or decrement the value.

It must evenly divide into the range designated by min and max.

Enables the built-in tooltip

To customize the tooltip, pass either a custom tooltip component or an instance of SliderTooltip with additional props configured.

<Slider
  tooltip={
    <SliderTooltip 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.

<Slider>
  <SliderTooltip percent side="after" />
</Slider>

If a custom tooltip is provided, it will receive the following props:

• children - The value prop from the slider

• visible - true if the tooltip should be displayed

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

• proportion - A number between 0 and 1 representing the proportion of the value in terms of min and max

The value of the slider.

Defaults to the value of min.

The interval (in milliseconds) between valid wheel events.

For example, 200 means to ignore wheel events occurred within 200ms of the last processed wheel event while 0 means to process all wheel events. If the number is large, the slider value changes slowly.