Range Slider

Range Slider allows the user to move a 'handle' to select a single value or range.

Overview

The Range Slider allows the user to move a 'handle' to select a single value or range.

The Ranger Slider component.

Anatomy

Icon3Slider Handle2Slider1The Ranger Slider anatomy.
  1. Slider. This is the main container of the component.

  2. Handle. Clicking and holding the handle will allow the user to move the range to the value they need. When it is pressed, the current value of the range slider is displayed above the handle.

  3. Icon (optional). This is an optional icon that can be added to the slider to give context.

    States

    ActiveDefault35The Ranger Slider states.

    The Range Slider has two states - default and active. When the user interacts with the slider, the handle extends a transparent border and displays the current slider value above it.

    Variations

    Dual handleSingle HandleThe Ranger Slider variations.

    There are two variations to the Range Slider - the Single Handle and the Dual Handle. As the name suggests, the Dual handle adds an extra handle to the slider, allowing the user to select both the top and bottom of the range.

Range Slider allows the user to move a 'handle' to select a single value or range.

Basic Usage

<RangeSlider
  domain={[0, 40]}
  mode={1}
  values={[20]}
  onChange={() => {}}
  onUpdate={() => {}}
  tracksLeft
/>

Stepped

<RangeSlider
  domain={[0, 40]}
  step={10}
  mode={1}
  values={[20]}
  onChange={() => {}}
  onUpdate={() => {}}
  tickCount={4}
  tracksLeft
/>

Multiple handles

<RangeSlider
  domain={[0, 40]}
  step={10}
  mode={1}
  values={[10, 30]}
  onChange={() => {}}
  onUpdate={() => {}}
  tickCount={4}
/>

With icons

<RangeSlider
  domain={[0, 40]}
  step={10}
  mode={1}
  values={[20, 30]}
  onChange={() => {}}
  onUpdate={() => {}}
  tickCount={4}
  tracksLeft
  IconLeft={IconBrightnessLow}
  IconRight={IconBrightnessRight}
/>

With labels

0
10
20
30
40
<RangeSlider
  domain={[0, 40]}
  step={10}
  mode={1}
  values={[20]}
  onChange={() => {}}
  onUpdate={() => {}}
  tickCount={4}
  tracksLeft
  hasLabels
/>

Reversed scale

0
10
20
30
40
<RangeSlider
  domain={[0, 40]}
  step={10}
  mode={1}
  values={[20]}
  onChange={() => {}}
  onUpdate={() => {}}
  tickCount={4}
  tracksRight
  hasLabels
  reversed
/>

Disabled

<RangeSlider
  domain={[0, 40]}
  step={10}
  mode={1}
  values={[20]}
  onChange={() => {}}
  onUpdate={() => {}}
  tickCount={4}
  tracksLeft
  disabled
/>

RangeSlider Properties

Additional details about props can be found here.

NameTypeRequiredDefaultDescription
classNamestringFalsen/aCustom CSS class to add to the RangeSlider element.
domainnumber[]Truen/aThe lower and upper bounds of the range.
stepnumberFalsen/aStep change by this increment.
modenumber|funcTruen/aThe interaction mode. Value of 1 will allow handles to cross each other. Value of 2 will keep the sliders from crossing and separated by a step. Value of 3 will make the handles pushable and keep them a step apart. ADVANCED: You can also supply a function that will be passed the current values and the incoming update. Your function should return what the state should be set as.
valuesnumber[]Truen/aAn array of numbers. You can supply one for a value slider, two for a range slider or more to create n-handled sliders. The values should correspond to valid step values in the domain. The numbers will be forced into the domain if they are two small or large.
onChangefuncFalsen/aCallback invoked when the value of the slider has changed. This will recieve changes at the end of a slide as well as changes from clicks on rails and tracks. Receives values.
onUpdatefuncFalsen/aCallback invoked with the values at each update (caution: high-volume updates when dragging). Receives values.
IconLeftReact.ElementTypeFalsen/aIcon component to display left of the slider.
IconRightReact.ElementTypeFalsen/aIcon component to display right of the slider.
tracksLeftbooleanFalsen/aDisplay slider tracks to the left of the handle(s).
tracksRightbooleanFalsen/aDisplay slider tracks to the right of the handle(s).
hasLabelsbooleanFalsen/aDisplay the scale at the bottom of the slider.
isReversedbooleanFalsen/aReverse the slider scale.
isDisabledbooleanFalsen/aIgnore all mouse, touch and keyboard events.