Warp Design System

Appearance

Range slider - Overview ​

Range sliders provide a visual indication of a selected interval within a defined range by moving two handles along a horizontal track to set both a minimum and maximum value.

AndroidreleasedElementsreleasediOSreleasedReact 19released

Example ​

html
<w-slider label="Range" min="0" max="100">
  <w-slider-thumb
    slot="from"
    aria-label="From value"
    name="from"
  ></w-slider-thumb>
  <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
</w-slider>

Overview ​

Range sliders are best suited for quickly selecting an interval within a designated range. They offer an intuitive way to adjust settings like volume, price filters, or relative distances.

Sliders are available in two variants:

Anatomy ​

Example of a Range slider

  1. Label (optional): Describes what type of data the slider controls or adjusts.
  2. Handles: Two movable elements used to select a minimum and maximum value within the range.
  3. Filled/active track: Visualises the selected portion between the two handles.
  4. Tooltip: Displays the current value while dragging a handle, providing immediate feedback.
  5. Track: Represents the full possible range of selectable values.
  6. Minimum range label (optional): Indicates the lowest selectable value and defines the start of the range.
  7. Maximum range label (optional): Indicates the highest selectable value and defines the end of the range.
  8. Minimum value input/text field (optional): Displays the current minimum value selected by the left handle and allows manual entry.
  9. Maximum value input/text field (optional): Displays the current maximum value selected by the right handle and allows manual entry.
  10. Text field suffix (optional): Provides contextual clarification for values when their meaning is ambiguous, such as currency or measurement units.

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system