Form

Slider

A slider offers a quick and visual way for users to select a value within a given range.
LowerMiddleHigher
1
import {Slider} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<Slider
5
id="πŸ„"
6
hasTooltip
7
step={25}
8
marks={{
9
0: 'Lower',
10
50: 'Middle',
11
100: 'Higher',
12
}}
13
initialValue={50}
14
appendValueFormatter={(value: number) => `${value}$`}
15
/>
16
);
17
export default Demo;

Props

NameTypeDefaultDescription
idrequiredstring
The unique identifier of the Slider
activeDotStyleCSSProperties
appendValueboolean | AppendedValueSidefalse
Whether to display a value around the slider (true or AppendedValueSide.both) or only on one side (AppendedValueSide.left, AppendedValueSide.right)
appendValueFormatter(value: number, side?: AppendedValueSide.left | AppendedValueSide.right) => ReactNode
Function that receives the current value and a side and renders a component the specified side of the slider
  • value–the current value of the slider
  • side–a value of AppendedValueSide
ariaLabelForHandlestring
ariaLabelledByForHandlestring
ariaValueTextFormatterForHandle(value: number) => string
autoFocusboolean
classNamestring
crossingPointnumber
Crossing point, if the value is lower than that the filling will be on the right and if it's higher, it will be on the left
customTooltip(value: any) => Element
A callback function that is used to display information when the user is changing the value
  • value–the current value
defaultValuenumber
disabledboolean
dotsboolean
dotStyleCSSProperties
draggableTrackboolean
handle(props: { className: string; prefixCls?: string; vertical?: boolean; offset: number; value: number; dragging?: boolean; disabled?: boolean; min?: number; max?: number; reverse?: boolean; index: number; tabIndex?: number; ... 4 more ...; ref?: Ref<...>; }) => ReactElement<...>
handleStyleCSSProperties
hasTooltipboolean
Whether to display a tooltip
includedboolean
initialValuenumber
The initial value
marksRecord<number, ReactNode | { style?: CSSProperties; label?: string; }>
maxnumber
maximumTrackStyleCSSProperties
minnumber
minimumTrackStyleCSSProperties
onAfterChange(value: number) => void
onBeforeChange(value: number) => void
onBlur(e: FocusEvent<HTMLDivElement, Element>) => void
onChange(rangeOutputValue: number) => any
A callback function executed when the slider moves
  • rangeOutputValue–the current value
onFocus(e: FocusEvent<HTMLDivElement, Element>) => void
prefixClsstring
railStyleCSSProperties
reverseboolean
startPointnumber
stepnumber
styleCSSProperties
tooltipStylePartial<any>
Overrides for the style of the tooltip
trackStyleCSSProperties
valuenumber
verticalboolean
tabIndexdeprecatednumber
do not use

Examples

Asymetric
-20000200010,000
0
1
import {Slider} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<Slider
5
id="asymetric-slider"
6
min={-2000}
7
max={10000}
8
initialValue={2000}
9
marks={{'-2000': '-2000', 2000: '2000', 0: '0', 10000: '10,000'}}
10
hasTooltip
11
appendValue
12
/>
13
);
14
export default Demo;
Change handler
-100%-50%050%100%
The current value is 0
1
import {Slider} from '@coveord/plasma-react';
2
import {useState} from 'react';
3
4
const Demo = () => {
5
const initialValue = 0;
6
const [value, setValue] = useState(initialValue);
7
return (
8
<>
9
<Slider
10
id="slider-on-change"
11
min={-100}
12
max={100}
13
marks={{
14
'-100': '-100%',
15
'-50': '-50%',
16
0: '0',
17
50: '50%',
18
100: '100%',
19
}}
20
step={5}
21
initialValue={initialValue}
22
onChange={(currentValue) => {
23
setValue(currentValue);
24
}}
25
hasTooltip
26
customTooltip={() => <span>this custom tooltip shows the slider current value of {value}</span>}
27
/>
28
The current value is {value}
29
</>
30
);
31
};
32
export default Demo;
Append values
50%
50%
1
import {AppendedValueSide, Slider} from '@coveord/plasma-react';
2
import {FunctionComponent} from 'react';
3
4
const AppendLabel: FunctionComponent<{value: string; label: string}> = ({value, label}) => (
5
<div style={{textAlign: 'center'}}>
6
<label style={{display: 'block', marginBottom: '10px', textAlign: 'center'}}>{label}</label>
7
<span style={{margin: '0 auto'}}>{value}</span>
8
</div>
9
);
10
11
const Demo = () => {
12
const appendValueFormatter = (value: number, side: string) => {
13
let formattedValue = `${value + 50}%`;
14
let valueLabel = 'Right Label';
15
16
if (side === AppendedValueSide.left) {
17
formattedValue = `${50 - value}%`;
18
valueLabel = 'Left Label';
19
}
20
21
return <AppendLabel value={formattedValue} label={valueLabel} />;
22
};
23
24
return (
25
<Slider
26
id="slider-append"
27
min={-50}
28
max={50}
29
appendValueFormatter={appendValueFormatter}
30
appendValue={AppendedValueSide.both}
31
/>
32
);
33
};
34
export default Demo;

Best Practices

A slider is appropriate when providing an exact value is not important. Sliders typically allow users to adjust the intensity of an effect, such as a percentage of opacity, or when an approximate value is sufficient, for example when choosing a flight departure time. It helps visualize a range of allowed values. Consider the following:

  • Use a slider when page real estate is not an issue and when visualizing the range helps users make more informed choices.
  • The slider should have a range of up to 100 values.
  • If the range is short (i.e., 5 values or less) or large (i.e., over 50 values), consider using a numeric input instead.

Use sliders carefully, as they can be difficult to control on smaller devices or when the range is very large but the space is limited.

Labeling

Keep marker labels short (i.e., ideally a single word).

Provide a short, descriptive title without action verbs. For example, write "Thumbnail size" rather than "Select the size of the thumbnail".

Track and Markers

The track represents the value range. It should be divided into equal steps using markers.

When exposing a numeric value is unimportant, name markers using adjectives. For instance, use β€œsmall” and β€œbig” when making users choose the size of a thumbnail.

When using numeric values to label markers, display the unit to provide context. For instance, show "90%" when making users select a percentage.

Use plus and minus signs when the range allows negative values.

Feedback and Validation

A slider always has a default value. Consider showing the most frequently selected value as the default. If no value particularly stands out, consider using a neutral value or the median. Ideally, the default value should correspond to a marker.

If users can select a numeric value between two markers, display this value above the handle or next to the slider. This allows users to refer to what they selected.


Related Components

Numeric input - When setting a precise value.

Edit guidelines