Back to Motion Prompt examples
UI component names · #14
Range slider
Two handles on one track pick a minimum and a maximum. On a price slider, the left handle is dragged right and the right handle left to narrow the range, then both go back.
Choosing & switchingrange-slidersliderdual-thumbmin-maxprice-filterrange
Full motion specification
How the movement works
Use it to filter by a range, such as price, date or size, with a minimum and a maximum.
- 014.5 s cycle on a 542×191 card. Track: x 54–488, 8 tall, at y 120; the part between the two handles is blue. Range ¥0–¥10,000.
- 02Handles: white, radius 13, 3 px blue rim; while dragged, radius 15 with a light-blue halo of radius 24.
- 03Low handle: 0.1 → 0.3 (¥1,000 → ¥3,000) over 1.0–1.6 s, back over 3.55–3.9 s. High handle: 1.0 → 0.8 (¥10,000 → ¥8,000) over 2.1–2.6 s, back over 2.95–3.3 s. All easeInOutCubic.
- 04A value bubble (28 tall) above each handle, blue with white text while dragged. The range "¥1,000 – ¥10,000" is shown in blue at top right, updated in ¥100 steps.
- 05The cursor sits on the handle it drags (presses at 1.0, 2.1, 2.95 and 3.55 s).
Prompt
Make the price filter a range slider with two handles, showing each value in a bubble while it is dragged.