Scout Filter Bar · Price Picker Redesign

5 Concepts — Min & Max, No Slider

Replacing the current “Under $X” dropdown with min/max price filtering. Scale widened to $0 – $15M+ (vs competitor $50K–$10M slider). Every option uses inputs, chips, lists, or steppers — never a dual-handle slider.

Current live: ScoutFilterBar.tsx — single price_max select (Under $400K … Under $2M). Backend already supports price_min + price_max via URL params.

Click any concept to open an interactive mockup — the price picker panel is always shown open below the filter bar for design review. Use Reset / Apply to interact.
V1 · Input + Range Chips

Custom Inputs + Popular Ranges

Min/max currency fields up top, then a wrap grid of one-click range chips ($250K–$400K through $5M–$15M). Fast for common bands; precise when typed.

Min + MaxOne-click presetsRecommended
V2 · Dual Column Tiers

From / Up To Tier Columns

Two scrollable button columns — pick a floor and ceiling from 22 tiers ($Any → $15M+). Clear visual pairing, no typing required.

Click-onlyWide scaleMobile scroll
V3 · List Select + Custom

Radio List + Custom Tab

Redfin-style list of named ranges (Any, Under $300K, $300K–$500K … $10M+) with a “Custom” tab for free-form min/max. Zero slider.

Familiar patternTab switchCompact
V4 · Market Tier Segments

Entry → Ultra Luxury Bands

Segmented tabs (Starter, Move-up, Premium, Luxury, Estate) each show relevant sub-ranges. Custom min/max always visible below.

Guided discoveryBuyer psychologyEstate $15M+
V5 · Steppers + Shortcuts

Formatted Inputs + ± Steppers

Large min/max fields with comma formatting and ± $50K / ± $100K / ± $250K step buttons. Column shortcuts at bottom for power users.

Precision controlNo dragPower user
Open on localhost (with npm run dev running): http://localhost:3000/mockups/scout-price-picker-index.html http://localhost:3000/mockups/scout-price-picker-slider-index.html — Redfin/Zillow dual-slider (R1–R5) http://localhost:3000/mockups/scout-price-picker-mps-index.htmlMPS original dual-slider (M1–M5) http://localhost:3000/mockups — all mockups index