Map Range Slider

The range slider lets users filter map items by a numerical value range — for example, properties priced between $1,000 and $2,000, or venues with a rating between 3 and 5 stars.

📷 Animated GIF: the range slider filters map items in real time as the handles are dragged — upload this GIF manually.

Create in Dynamic Map App

1. Navigate to Filter and Sorting.
2. Click Create Range Slider.

Configure Range Slider

Select the Number field from your CMS collection that the slider should filter by.

Set Additional Options

Enable Apply on Release Only to update the map only when the user finishes dragging — this reduces unnecessary map redraws and improves UX.

Update Code

Locate in Webflow Designer

The ncf-price-slider element is placed inside the cru-ncf-map-filter div.

Styling

Add a fixed width to the slider number display elements to keep the layout stable as values change.

Number Formatting

By default, numbers display without formatting. Use JavaScript's Number.toLocaleString() to add currency symbols, thousand separators, or locale-specific formats.

Append to Math.round(first) and Math.round(second):

• US formatting: .toLocaleString('en-US')
• US + dollar: .toLocaleString('en-US', { style: 'currency', currency: 'USD' })
• German + euro: .toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })

For a full list of locale format options, see W3Schools: Number toLocaleString.