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 min={0} max={100} step={1} value={0} />

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 size="medium" value={50} />
<Slider size="large" value={50} />

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 color="neutral" value={50} />

Disabled

Primary

Neutral

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

Label and Caption

Label

Caption

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

Metrics

50

<Slider hasMetric value={50} />

Format Metric

50%

<Slider
  hasMetric
  value={50}
  formatMetric={(value) => `${value}%`}
/>

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 invisble. 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} />

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

Legend Position

50

You can put the mark labels on top or bottom with the legendPosition property.

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

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

With marks

[10,50]

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

Event Handling

The Slider component provides an onValueChanged event handler that is triggered when the slider value changes. This can happen when:

• The user drags a handle
• The user clicks on the slider track
• The user uses keyboard navigation (arrow keys) with a handle

Single Handle Slider

For a single handle slider, the callback receives the current value as a number:

const handleValueChange = (value) => {
  console.log('New value:', value);
  
  // You can update state or perform other actions
  setTemperature(value);
  updateTemperatureSettings(value);
};

<Slider 
  value={50}
  onValueChanged={handleValueChange}
/>

Range Slider (Two Handles)

For a range slider with two handles, the callback receives an array containing the two values:

const handleRangeChange = (values) => {
  console.log('Range start:', values[0]);
  console.log('Range end:', values[1]);
  
  // You can update state or perform other actions
  setFilterRange(values);
  applyPriceFilter(values[0], values[1]);
};

<Slider 
  value={[20, 80]}
  onValueChanged={handleRangeChange}
/>

Note that when a slider is disabled (disabled={true}), the onValueChanged event will not be triggered.

API

QtmSlider

Property	Type	Default	Description
anchorPoint	number		The starting value of the slider having one handle. By default, the anchor point value is equal to the min value of slider.
caption	string	''	Slider caption
color	"neutral" | "primary"	'primary'	Set slider color
disabled	boolean	false	If true, the component is disabled.
formatMetric	(value: SliderValue) => string	null	Function to format the slider metric.
hasMetric	boolean	false	If true, the component has a metric to display its current value.
label	string	''	Slider label
legendPosition	"bottom" | "top"	'bottom'	Position of sliders legends with relation to sliders range. Can be on top or bottom of the slider
marks	IMarkProp[] | boolean		If true the marks are auto generated and displayed for each step. An array of marks can also be passed as parameter to generate custom marks. If step prop is null, it indicates where slider can move on.
max	number	100	The maximum allowed value of the slider. Should not be equal to min.
min	number	0	The minimum allowed value of the slider. Should not be equal to max.
size	"large" | "medium" | "small"	'medium'	The size of the slider
step	number	1	The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. When step is null, the handle can only be slid onto marks provided with the marks prop.
value	number | number[]	0	The value of the slide. The value has type number, that means the slider has one handle. When the value has a range [minValue, maxValue], that means the slider has two handles

Event	Type	Description
onValueChanged	CustomEvent<number | number[]>	Callback fired when a handle is moved or when slider range is clicked. function(event: object) => void You can pull out the collapsed state by accessing event.detail ( number| number[])