Slider

Introduction

A slider is a numeric input for choosing numbers between lower and upper bounds. It also has a labeled axis that supports custom formatting.

To adjust a slider value, the user clicks and drags a handle or clicks the axis to move the nearest handle to that spot. Users can also use arrow keys on the keyboard to adjust individual handles.

Use Slider for choosing a single value, RangeSlider for choosing two values, and MultiSlider for more advanced use cases.

Examples

0
1
2
3
4
5
6
7
8
9
10
2
0
1
2
3
4
5
6
7
8
9
10
17
0
1
2
3
4
5
6
7
8
9
10
2579

Usage

Slider

Use Slider to choose a single value on a number line. It is a controlled component, so the value prop determines its current appearance. Provide an onChange handler to receive updates and an onRelease handler to determine when the user has stopped interacting with the slider.

import React from "react";
import { Slider } from "@commure/components-foundation";
const MySlider = () => {
[value, setValue] = React.useState(2);
return <Slider value={value} onChange={newValue => setValue(newValue)}/>
}
export default MySlider;

RangeSlider

Use RangeSlider to choose a range between upper and lower bounds. The component functions identically to Slider with the addition of a second handle. It exposes its selected value as [number, number]: a two-element array with minimum and maximum range bounds.

RangeSlider is a controlled component, so the value prop determines its current appearance. Provide an onChange handler to receive updates and an onRelease handler to determine when the user has stopped interacting with the slider.

import React from "react";
import { RangeSlider } from "@commure/components-foundation";
const MyRangeSlider = () => {
[range, setRange] = React.useState([1, 7]);
return <RangeSlider value={range} onChange={newRange => setRange(newRange)}/>
}
export default MyRangeSlider;

MultiSlider

MultiSlider is a flexible solution for picking arbitrary values on a number line. It powers both Slider and RangeSlider internally and can be used for implementing more advanced use cases than one or two numbers.

import React from "react";
import { MultiSlider } from "@commure/components-foundation";
const MyMultiSlider = () => {
[multi, setMulti] = React.useState([2, 5, 7, 9]);
return (
<MultiSlider onChange={newMulti => setMulti(newMulti)}>
<MultiSlider.Handle value={multi[0]} type="start" intentAfter={Intent.PRIMARY} />
<MultiSlider.Handle value={multi[1]} type="start" intentAfter={Intent.SUCCESS} />
<MultiSlider.Handle value={multi[2]} type="end" intentAfter={Intent.WARNING} />
<MultiSlider.Handle value={multi[3]} type="end" />
</MultiSlider>
)
}
export default MyMultiSlider;

API Reference

Slider

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether the slider is non-interactive.
initialValuefalsenumberInitial value of the slider. This determines the other end of the track fill: from `initialValue` to `value`.
labelPrecisionfalsenumberNumber of decimal places to use when rendering label value. Default value is the number of decimals used in the `stepSize` prop. This prop has _no effect_ if you supply a custom `labelRenderer` callback.
labelRendererfalseboolean | (value: number) => string | ElementCallback to render a single label. Useful for formatting numbers as currency or percentages. If `true`, labels will use number value formatted to `labelPrecision` decimal places. If `false`, labels will not be shown.
labelStepSizefalsenumberIncrement between successive labels. Must be greater than zero.
maxfalsenumberMaximum value of the slider.
minfalsenumberMinimum value of the slider.
showTrackFillfalsebooleanWhether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`.
stepSizefalsenumberIncrement between successive values; amount by which the handle moves. Must be greater than zero.
valuefalsenumberValue of slider.
verticalfalsebooleanWhether to show the slider in a vertical orientation.

RangeSlider

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether the slider is non-interactive.
labelPrecisionfalsenumberNumber of decimal places to use when rendering label value. Default value is the number of decimals used in the `stepSize` prop. This prop has _no effect_ if you supply a custom `labelRenderer` callback.
labelRendererfalseboolean | (value: number) => string | ElementCallback to render a single label. Useful for formatting numbers as currency or percentages. If `true`, labels will use number value formatted to `labelPrecision` decimal places. If `false`, labels will not be shown.
labelStepSizefalsenumberIncrement between successive labels. Must be greater than zero.
maxfalsenumberMaximum value of the slider.
minfalsenumberMinimum value of the slider.
showTrackFillfalsebooleanWhether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`.
stepSizefalsenumberIncrement between successive values; amount by which the handle moves. Must be greater than zero.
valuefalseNumberRangeRange value of slider. Handles will be rendered at each position in the range.
verticalfalsebooleanWhether to show the slider in a vertical orientation.

MultiSlider

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultTrackIntentfalseIntentDefault intent of a track segment, used only if no handle specifies `intentBefore/After`.
disabledfalsebooleanWhether the slider is non-interactive.
labelPrecisionfalsenumberNumber of decimal places to use when rendering label value. Default value is the number of decimals used in the `stepSize` prop. This prop has _no effect_ if you supply a custom `labelRenderer` callback.
labelRendererfalseboolean | (value: number) => string | ElementCallback to render a single label. Useful for formatting numbers as currency or percentages. If `true`, labels will use number value formatted to `labelPrecision` decimal places. If `false`, labels will not be shown.
labelStepSizefalsenumberIncrement between successive labels. Must be greater than zero.
maxfalsenumberMaximum value of the slider.
minfalsenumberMinimum value of the slider.
showTrackFillfalsebooleanWhether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`.
stepSizefalsenumberIncrement between successive values; amount by which the handle moves. Must be greater than zero.
verticalfalsebooleanWhether to show the slider in a vertical orientation.

Related Reading

Blueprint Reference