All challenges

UI · Frontend challenge · Frontend UI

Dual Range Price Slider

Difficulty

hard

Time

~30m

Format

Single

Grading

Human review

#ui#react#frontend#state#slider
Mission file // read carefullyhard

Build a Dual Range Slider (Min/Max selectors).

Requirements

  • Display two slider handles on a single track representing Min and Max thresholds (e.g. Price bounds).
  • Dragging handles adjusts values independently, preventing Min from exceeding Max.
  • Display current boundary values (e.g. $10 - $90).

Build with

React
Live preview as you type
Human review
Start challenge

Sign in to save your progress.