Developer mode
Opens components on the React tab by default.
Your bookmarks

Slider

Also known as Range

Enables selection from a range of values.

When you want to offer users options within a clearly defined range, it can help to give them a more visually pleasing interface. Sliders allow users to move their choice around within a given range.

Using a slider lets you offer the choice of a single value or a range of values. You can even add additional data to the slider to give clear feedback on what falls within a selected range (such as how many flights fall within a price range).

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

Label: optionally provides an overview of what is being selected; value description: optionally clearly describes the range users can select from; histogram description: optionally describes what is contained in the selected range in the histogram; histogram: optionally shows what's included in the selection; min value: sets the lowest possible value; max value: sets the highest possible value; handlers: enable users to select their desired value and to improve accessibility it's best to add a label.

Guidelines

Use labels

Labels serve to clearly present what is expected. They are especially important for people who won’t see other visual cues. But they also help everyone know exactly what to enter.

For the label, use short descriptive phrases, ideally nouns that make the request clear. See our patterns for form labels for some examples.

import Slider from "@kiwicom/orbit-components/lib/Slider";
() => <Slider label="Volume" minValue={0} maxValue={100} defaultValue={33} />

Present immediate feedback

Users are used to seeing immediate results from interacting with sliders, such as from volume controls on phones and video players. Make sure they can see the effect of their choice of range.

Histograms help with this by offering a visualization of what is included within the range. Just make sure the information is also included non-visually so everyone can access it.

import Slider from "@kiwicom/orbit-components/lib/Slider";
import calculateCountOf from "@kiwicom/orbit-components/lib/calculateCountOf";
import Value from "@kiwicom/orbit-components/lib/Value/Value";
() => {
  const [priceRange, setPriceRange] = React.useState([50, 250])
  const step = 50
  const [selectedFlights, totalFlights] = calculateCountOf(
    availableFlights,
    priceRange.map((x) => x / step),
    0
  )
  return (
    <Slider
      histogramData={availableFlights}
      histogramDescription={`${selectedFlights} of ${totalFlights} flights`}
      defaultValue={[50, 250]}
      ariaLabel={["Minimum price", "Maximum price"]}
      label="Price"
      minValue={0}
      step={step}
      maxValue={1000}
      valueDescription={`$${priceRange[0]}–$${priceRange[1]}`}
      onChange={(sliderValue: Value) => {
        if (typeof sliderValue === "object") setPriceRange(sliderValue)
      }}
    />
  )
}

Make range clear

Users want to know exactly what they’re selecting from. So make it clear what the minimum and maximum of the range are.

The value description is the place to present this information clearly without it demanding too much attention.

Use for appropriate ranges

Sliders work well for many kinds of values. But if the range is too large (such as 0–1,000 counting by 1) or too small (such as 0–3), they start to lose their benefits.

For large ranges, try to break it into smaller pieces, or step up and down by a large number. For small ranges, consider checkboxes or selects.

Hide on small screens

When a screen doesn’t have enough space for a full slider, hide it initially behind a button. Popovers are great for disclosing sliders properly.

import Button from "@kiwicom/orbit-components/lib/Button";
import Popover from "@kiwicom/orbit-components/lib/Popover";
import Slider from "@kiwicom/orbit-components/lib/Slider";
() => (
  <Popover
    content={
      <Slider label="Volume" minValue={0} maxValue={100} defaultValue={33} />
    }
    width="320px"
  >
    <Button iconRight={<ChevronDown ariaLabel="Open slider" />}>
      Volume
    </Button>
  </Popover>
)

Related components

InputField

To input single, large numbers, use an input field with the input mode set to number.