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

0
1
2
3
4
5
6
7
8
9
10
2
Edit code

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

0
1
2
3
4
5
6
7
8
9
10
2579
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.

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