Skip to main content
🏠FormSlider

Slider

Slider is a form element with which users can set a value by dragging a cursor along a bar. It uses a knob or lever moved horizontally to control a variable, such as volume on a radio or brightness on a screen.

Continuous slider​

Continuous slider allow users to select a value along a subjective range.

The default slider has a minimum value of 0, a maximum value of 100, a step value of 1 and a handle value of 0.

<Slider></Slider>
<Slider min={0} max={100} step={1} value={0}></Slider>

Sizes​

The slider is available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default the slider is medium.

Small

Medium

Large

<Slider size="small" value={50}></Slider>
<Slider size="medium" value={50}></Slider>
<Slider size="large" value={50}></Slider>

Colors​

By default, the sliders is emphasized (primary theme). Providing a visual prominence. For visual components where you don’t want to emphasize the slider component, the neutral theme is more appropriate for this deprioritization its focus on the screen.

Primary

Neutral

<Slider color="primary" value={50}></Slider>
<Slider color="neutral" value={50}></Slider>

Disabled​

Primary

Neutral

<Slider color="primary" disabled value={50}></Slider>
<Slider color="neutral" disabled value={50}></Slider>

Label, Caption and Metric​

The slider can have a label a caption and a metric label respectively with attributes label caption and has-metric

Caption

50
<Slider label="Label" caption="Caption" value={50} hasMetric></Slider>

Discrete slider​

Discrete slider can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with marks=.

50
<Slider marks hasMetric value={50} step={10} />

Small steps​

You can change the default step increment.

0
<Slider
  marks
  step={0.00000001}
  min={-0.00000005}
  max={0.0000001}
  hasMetric
></Slider>

Custom marks​

You can restrict the marks to those provided with the marks prop.

A mark object passed through the marks prop must have a value. It can be visible or invisible. It can be main one or secondary one. And it can be with or without a legend label.

50
const marks = [
  {
    value:0,
    label:"0°C",
    main: true,
    visible: true
  },
    {
    value:10,
    label:"10°C",
  },
  {
    value:50,
    label:"50°C",
    main: true,
  },
  {
    value: 90,
    label:"90°C",
  },
  {
    value:100,
    label:"100°C",
    main: true,
  },
]
<Slider marks={marks} hasMetric value={50}></Slider>

Restricted values​

You can restrict the selectable values to those provided with the marks prop with step=.

50
const marks = [
  {
    value:0,
    label:"0°C",
  },
    {
    value:10,
    label:"10°C",
  },
  {
    value:50,
    label:"50°C",
  },
  {
    value: 90,
    label:"90°C",
  },
  {
    value:100,
    label:"100°C",
  },
]
<Slider marks={marks} step={null} hasMetric value={50}></Slider>

Legend Position​

50

You can put the mark labels on top or bottom with the legend-position property.

<Slider marks={marks} hasMetric value={50} legendPosition="top"></Slider>

Two Handles​

The slider can be used to set the start and end of a slider range by supplying an array of values to the value prop.

[10,50]
<Slider value={[10, 50]} hasMetric></Slider>

With marks​

[10,50]
<Slider value={[10, 50]} hasMetric marks step={10}></Slider>

API​

Loading API documentation...