← Back to Documentation Overview | Search these pages with the button in the top right
The range slider lets users filter map items within a specific range of values—like properties priced between $1,000 and $2,000, or any other numerical range you define.
Create in Dynamic Map App
Configure Range Slider
Set desired number field that should be searched.
Set Additional Settings
You can set the range slider to apply on release only, which can enhance your filter’s user experience.
Update Code
Insert updated code into Dynamic Map’s Custom Code
Locate in Designer
Locate the range slider and its different elements in Webflow’s designer.
The ncf-price-slider is placed inside the cru-ncf-map-filter
Add a width to your slider numbers to make sure the range slider looks smooth always.
<aside> 💡 Pro Tip: Add number formatting
By default, number is displayed without any formatting. You can easily change the formatting by adding some text with the javascript "Number toLocaleString” method:
Append to:
Math.round(first)
Math.round(second)
If you want simple US formatting use
.toLocaleString('en-US')
Left Min Text ⇒ Math.round(first).toLocaleString('en-US')
Right Min Text ⇒ Math.round(second).toLocaleString('en-US')
If you want german + euro formatting just use:
.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })
Left Min Text ⇒ Math.round(first).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })
Right Min Text ⇒ Math.round(second).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })
If you want US + dollar formatting just use:
.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
Left Min Text ⇒ Math.round(first).toLocaleString('en-US', { style: 'currency', currency: 'USD' })
Right Min Text ⇒ Math.round(second).toLocaleString('en-US', { style: 'currency', currency: 'USD' })
</aside>
<aside> 👉 Questions? We're excited to [email protected]
</aside>