Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
_tests_
components
utils
README.md
Slider.stories.js
consts.js
index.js
index.js.flow

README.md

Slider

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

Props

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

Name Type Default Description
ariaLabel string or string[] aria-label attribute or attributes for handles. See functional specs.
ariaValueText string Readable text alternative of current value. See accessibility.
dataTest string Optional prop for testing purposes.
defaultValue Value 1 Initial value of the Slider when it mounts. See value type for advanced usage.
histogramData number[] Property for passing the histogram's data. See Histogram for more info.
histogramDescription Translation Text property where you should display the total count of displayed data. See Histogram for more info.
histogramLoading boolean false If true the Loading component will replace the Histogram. See Histogram for more info.
histogramLoadingText Translation The text of the Histogram when it's loading. See Histogram for more info.
label Translation The label of the Slider. Should communicate what is the purpose of it.
max number 100 The maximum value of the Slider.
min number 1 The minimum value of the Slider.
onChange Value => void | Promise Callback for handling onChange event. See functional specs for advanced usage.
onChangeAfter Value => void | Promise Calback for handling onChangeAfter event. See functional specs for advanced usage.
onChangeBefore Value => void | Promise Callback for handling onChangeBefore event. See functional specs for advanced usage.
step number 1 Value that should be added or subtracted when Handle moves. The max and min should be divisible by this number and it should be integer.
valueDescription Translation Text property where you should display the selected value range.

Value

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

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

Histogram

  • 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 min, max and step property. The total count of columns should be (max - min + 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 (
    <Popover
      content={
        <Slider defaultValue={[1, 24]} min={1} max={24} onChange={val => setValue(val)} />
      }
    >
      <Tag selected={!!value}>Time of departure</Tag>
    </Popover>
  )
}

Accessibility

  • 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 = React.useMemo(() => `from midnight to ${value}`, [value]);
  return <Slider defaultValue={12} min={1} max={24} onChange={val => setValue(val)} ariaValueText={ariaValueText} />
}

calculateCountOf

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
You can’t perform that action at this time.