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.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

SyntaxError: Unexpected token (5:1)
1 : return (() => {
2 :   [value, setValue] = React.useState(2);
3 : 
4 :   return <Slider value={value} onChange={newValue => setValue(newValue)} />;
5 : };)
     ^
Edit code

SyntaxError: Unexpected token (7:1)
3 : 
4 :   return (
5 :     <RangeSlider value={range} onChange={newRange => setRange(newRange)} />
6 :   );
7 : };)
     ^
Edit code

SyntaxError: Unexpected token (24:1)
20 :       />
21 :       <MultiSlider.Handle value={multi[3]} type="end" />
22 :     </MultiSlider>
23 :   );
24 : };)
      ^
Edit code

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.

1import React from "react";
2import { Slider } from "@commure/components-foundation";
3
4const MySlider = () => {
5  [value, setValue] = React.useState(2);
6
7  return <Slider value={value} onChange={newValue => setValue(newValue)} />;
8};
9
10export 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.

1import React from "react";
2import { RangeSlider } from "@commure/components-foundation";
3
4const MyRangeSlider = () => {
5  [range, setRange] = React.useState([1, 7]);
6
7  return (
8    <RangeSlider value={range} onChange={newRange => setRange(newRange)} />
9  );
10};
11
12export 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.

1import React from "react";
2import { MultiSlider } from "@commure/components-foundation";
3
4const MyMultiSlider = () => {
5  [multi, setMulti] = React.useState([2, 5, 7, 9]);
6
7  return (
8    <MultiSlider onChange={newMulti => setMulti(newMulti)}>
9      <MultiSlider.Handle
10        value={multi[0]}
11        type="start"
12        intentAfter={Intent.PRIMARY}
13      />
14      <MultiSlider.Handle
15        value={multi[1]}
16        type="start"
17        intentAfter={Intent.SUCCESS}
18      />
19      <MultiSlider.Handle
20        value={multi[2]}
21        type="end"
22        intentAfter={Intent.WARNING}
23      />
24      <MultiSlider.Handle value={multi[3]} type="end" />
25    </MultiSlider>
26  );
27};
28
29export default MyMultiSlider;

API Reference

Slider

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether the slider is non-interactive.
initialValue	false	number	Initial value of the slider. This determines the other end of the track fill: from `initialValue` to `value`.
labelPrecision	false	number	Number 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.
labelRenderer	false	boolean | (value: number) => string | Element	Callback 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.
labelStepSize	false	number	Increment between successive labels. Must be greater than zero.
max	false	number	Maximum value of the slider.
min	false	number	Minimum value of the slider.
showTrackFill	false	boolean	Whether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`.
stepSize	false	number	Increment between successive values; amount by which the handle moves. Must be greater than zero.
value	false	number	Value of slider.
vertical	false	boolean	Whether to show the slider in a vertical orientation.

RangeSlider

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether the slider is non-interactive.
labelPrecision	false	number	Number 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.
labelRenderer	false	boolean | (value: number) => string | Element	Callback 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.
labelStepSize	false	number	Increment between successive labels. Must be greater than zero.
max	false	number	Maximum value of the slider.
min	false	number	Minimum value of the slider.
showTrackFill	false	boolean	Whether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`.
stepSize	false	number	Increment between successive values; amount by which the handle moves. Must be greater than zero.
value	false	NumberRange	Range value of slider. Handles will be rendered at each position in the range.
vertical	false	boolean	Whether to show the slider in a vertical orientation.

MultiSlider

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
defaultTrackIntent	false	Intent	Default intent of a track segment, used only if no handle specifies `intentBefore/After`.
disabled	false	boolean	Whether the slider is non-interactive.
labelPrecision	false	number	Number 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.
labelRenderer	false	boolean | (value: number) => string | Element	Callback 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.
labelStepSize	false	number	Increment between successive labels. Must be greater than zero.
max	false	number	Maximum value of the slider.
min	false	number	Minimum value of the slider.
showTrackFill	false	boolean	Whether a solid bar should be rendered on the track between current and initial values, or between handles for `RangeSlider`.
stepSize	false	number	Increment between successive values; amount by which the handle moves. Must be greater than zero.
vertical	false	boolean	Whether to show the slider in a vertical orientation.

Related Reading

Blueprint Reference