Overview

The range slider allows users to filter content between a time range. It’s used within the filter group on the filtered landing homepage and search landing page.

Elements

1

2

3

4

View Code

• 1

  Base slider
• 2

  Date selection
• 3

  Circular indicator
• 4

  Tooltip

Variants

None.

Behaviours

The user can select and drag either end of the slider to shorten or widen the time range for filter results. As the user drags the ends of the slider, the time range corresponds to the point in the date range.

The tooltip dynamically displays the low value on the left and high value on the right.

Recommendations

Add content strategy guidelines and editorial rules here.