limestone/Slider

Provides Limestone-themed slider components and behaviors.

Loading Live Preview

Members

Slider Component

Slider input with Limestone styling, spotlight/Spottablespotlight/Spottable.Spottable, ui/Touchableui/Touchable and limestone/Sliderlimestone/Slider.SliderDecorator applied.

By default, Slider 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.

Wrapped with: limestone/Sliderlimestone/Slider.SliderDecorator

Properties

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.

SliderBase Component

Range-selection input component.

Extends: ui/Sliderui/Slider.SliderBase

Properties

activateOnSelect

Boolean

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

active

Boolean

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

colorPicker

Boolean

Indicates if this component will be used as a colorPicker.

Default: false

css

Object

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

disabled

Boolean

Disables component and does not generate events.

focused

Boolean

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

keyFrequency

Array(Number)

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 spotlight/Acceleratorspotlight/Accelerator.Accelerator. 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]}

Default: [1]

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

The range between min and max should be evenly divisible by limestone/Sliderlimestone/Slider.SliderBase.step.

Default: 100

min

Number

The minimum value of the slider.

The range between min and max should be evenly divisible by limestone/Sliderlimestone/Slider.SliderBase.step.

Default: 0

noWheel

Boolean

Disable wheel event.

onActivate

Function

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

onKeyDown

Function

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.

onKeyUp

Function

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.

showAnchor

Boolean

Displays an anchor at progressAnchor.

showMinMax

Boolean

Displays the min and max values at the edges of the slider.

step

Number

The amount to increment or decrement the value.

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

Default: 1

BooleanElementFunction

Enables the built-in tooltip

To customize the tooltip, pass either a custom tooltip component or an instance of limestone/Sliderlimestone/Slider.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 ui/Slottableui/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

value

Number

The value of the slider.

Defaults to the value of min.

wheelInterval

Number

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.

Default: 0

SliderDecorator Higher-Order Component

Limestone-specific slider behaviors to apply to limestone/Sliderlimestone/Slider.SliderBase.

Includes: ui/Changeableui/Changeable.Changeable
Includes: spotlight/Spottablespotlight/Spottable.Spottable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable
Includes: ui/Slottableui/Slottable.Slottable
Includes: ui/Sliderui/Slider.SliderDecorator

SliderTooltip Component

A limestone/TooltipDecoratorlimestone/TooltipDecorator.Tooltip specifically adapted for use with limestone/ProgressBarlimestone/ProgressBar.ProgressBar or limestone/Sliderlimestone/Slider.Slider.