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.