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.

alignStepsWithTicks

Boolean

Ignores step and snaps the knob to each tick mark.

The increment becomes (max - min) / (tickCount - 1). Requires ticks or at least three labels.

Default: false

automaticLabels

Boolean

Generates a numeric label for each tick from min, max, and the tick count.

Shown on horizontal sliders only. When set, limestone/Sliderlimestone/Slider.SliderBase.labels is ignored. When false or unset, labels is used as provided.

Default: false

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
ticks - The tick marks container
tickLabel - A label displayed with a tick mark

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. Ignored when limestone/Sliderlimestone/Slider.SliderBase.alignStepsWithTicks is set.

labels

Array(Node)

Labels displayed with the slider.

When two labels are provided, they are shown at the start and end of the track. When three or more labels are provided, each label is shown beneath its corresponding tick mark on a horizontal slider. Tick labels are not shown when orientation is vertical. If ticks is not set, tick marks are created to match the number of labels.

Ignored when limestone/Sliderlimestone/Slider.SliderBase.automaticLabels is set.

Labels are displayed on a single line. Overflowing text is marqueed.

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.

On a slider with tick marks, the values are placed before and after the track, on the same line as the slider. Without ticks, they are shown beside or below the track.

Ignored when limestone/Sliderlimestone/Slider.SliderBase.labels are provided, so the values do not overlap the tick labels.

step

Number

The amount to increment or decrement the value.

It must evenly divide into the range designated by min and max. Ignored when limestone/Sliderlimestone/Slider.SliderBase.alignStepsWithTicks is set.

Default: 1

ticks

BooleanNumber

Displays equally spaced tick marks along the slider track.

Tick marks overlay the track and indicate selectable points. The knob can rest on a tick when that position is a valid step value. A slider with tick marks must display at least three ticks, and the interval between every tick must be the same.

true - Displays one tick per step when there are 3-11 steps, otherwise five ticks (or one per label when labels has three or more items)
Number - Displays that many tick marks (minimum 3). Use limestone/Sliderlimestone/Slider.SliderBase.alignStepsWithTicks so the knob snaps to every mark.

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.