An interactive map with price-tag markers and a dual-handle range slider. Users set a salary/budget range and markers update instantly. Tapping a marker reveals a bottom sheet with title, price, address, and quick actions (Route, Share). Currency and labels auto-format by locale.

Functionality

• Dual-handle range slider (min/max) with live interval display (e.g., $0—$20,000).

• Price-labeled map markers that update in real time as the range changes.

• Bottom sheet detail card: title, price, address, Route and Share actions.

• Locale-aware currency formatting and units.

• Configurable: slider step, defaults, colors/theme, pin style, price rounding.

• Performance: debounced updates, viewport (bounding-box) loading, server-side filtering.

• Optional: marker clustering on low zoom; persist user’s last filter state.

Use cases

• Job marketplace with salary filtering (as shown).

• Real estate & rentals: filter by listing price or nightly rate.

• Hotels, car rentals, or services with budget caps.

• Events/activities maps with price categories.

• B2B geo-analytics: visualize price points across regions.

Keywords

Map, Price Pins, Salary Filter, Range Slider, Bottom Sheet, Marker Clustering, Geo-filtering, Currency Formatting, Listings, Route, Share, Google Maps, Flutter/FlutterFlow, UX.