Enables selection from a range of values.


To implement Slider component into your project you’ll need to add the import:

import Slider from "@kiwicom/orbit-components/lib/Slider";

After adding import into your project you can use it simply like:

<Slider defaultValue={5} onChange={value => doSomething(value)} />


Table below contains all types of the props available in the Slider component.

ariaLabelstring or string[]aria-label attribute or attributes for handles. See functional specs.
ariaValueTextstringReadable text alternative of current value. See accessibility.
dataTeststringOptional prop for testing purposes.
idstringSet id for Slider
defaultValueValue1Initial value of the Slider when it mounts. See value type for advanced usage.
histogramDatanumber[]Property for passing the histogram’s data. See Histogram for more info.
histogramDescriptionTranslationText property where you should display the total count of displayed data. See Histogram for more info.
histogramLoadingbooleanfalseIf true the Loading component will replace the Histogram. See Histogram for more info.
histogramLoadingTextTranslationThe text of the Histogram when it’s loading. See Histogram for more info.
labelTranslationThe label of the Slider. Should communicate what is the purpose of it.
maxValuenumber100The maximum value of the Slider.
minValuenumber1The minimum value of the Slider.
onChangeValue => void \| PromiseCallback for handling onChange event. See functional specs for advanced usage.
onChangeAfterValue => void \| PromiseCalback for handling onChangeAfter event. See functional specs for advanced usage.
onChangeBeforeValue => void \| PromiseCallback for handling onChangeBefore event. See functional specs for advanced usage.
stepnumber1Value that should be added or subtracted when Handle moves. The maxValue and minValue should be divisible by this number and it should be integer.
valueDescriptionTranslationText property where you should display the selected value range.


The Slider component supports usage with one handle and also with multiple handles.

If you want to use Slider with range possibility, just simply pass array of numbers to the defaultValue property, for instance [1, 12]. The exact same type will be then returned with all callbacks. e.g.:

defaultValue={[1, 12]}
onChange={value => {
console.log(value); // [X, Y]


  • If you need to use Slider component together with Histogram, use property histogramData for that.
  • You need pass the same amount of data that is possible to select by definition of minValue, maxValue and step property. The total count of columns should be (maxValue - minValue + step) / step.
  • The Histogram won’t be visible on desktop devices until the user focuses one of the handles. On mobile devices is the Histogram always shown.
  • By default, the histogramLoadingText is null and only glyph of inlineLoader will appear.
  • With Histogram, it’s recommended to use also histogramDescription property, where you should display the total count of selected data from the array. For it, you can use the calculateCountOf function.

Functional specs

  • When you use range type of the Slider component, you should specify ariaLabel property as array of labels. For instance: ["First handle", "Second handle]. If you use simple Slider, just one string (not array) is enough.
  • In every case of using the Slider component on mobile devices, the Slider should be wrapped in the Popover. For instance like this:
const MobileSlider = () => {
const [value, setValue] = React.useState([1, 24]);
return (
<Slider defaultValue={[1, 24]} minValue={1} maxValue={24} onChange={val => setValue(val)} />
<Tag selected={!!value}>Time of departure</Tag>


  • You should use ariaValueText only for cases when the value cannot be accurately represented as a number. For instance, when you use the Slider for selection of time range, you should dynamically change the ariaValueText to current selection e.g. 00:00 to 13:00 every time when onChange triggers.
const SliderExample = () => {
const [value, setValue] = React.useState(12);
const ariaValueText = `from midnight to ${value}`;
return (
onChange={val => setValue(val)}


Function calculateCountOf will help you to count the total number of selected data and total number of all columns. You can then use these returned values for displaying the histogramDescription property to the user, properly.

For using it, you can use this reference:

import calculateCountOf from "@kiwicom/orbit-components/lib/Slider/utils/calculateCountOf";
const histogramData = [0, 10, 14, 40, 0, 11];
const value = [1, 3]; // can be just number also
const minValue = 1;
const [selectedCount, totalCount] = calculateCountOf(histogramData, value, minValue);
console.log(`Showing ${selectedCount} of ${totalCount}`); // Showing 24 of 75 flights


There is a dataTest prop for ability to test the component. There are also hardcoded data-test attribute on handlers in format SliderHandle-${index} where index starts from 0.