Incremental slider with currency

Hi all,

I’m using this wonderful slider posted by @josephxbrick but I can’t figure out how to make the number on the bubble to appear with a currency sign and a separator (e.g $5,000)
Live example -

Can anyone help please? Thanks!

I managed to add the $ sign and the separator by using this on the variable

_$[[ (This.text.replace(',','')*1).toLocaleString() ]]_

But I have no idea how to fix the dial not going all the way and the colours that have gotten messed up :frowning: what did I do wrong?

slider_edited.rp (78.1 KB)

Well, @josephxbrick has your back here as well! Take a look at this thread and the file he attached for currency formatting:

The short answer is that you can use this formula to add a dollar sign and format a number with commas, using the built-in (javascript) function ToLocaleString() :

If you need to support decimals, as in the value $1,234.56 then the formula becomes more complex, as explained in the thread above. I’ve applied this to your example. See this updated file:
notched slider 2.rp (518.7 KB)

EDIT: I posted this reply before I saw that @eladl had posted a second time here. I’ll try to look at this second example, but it looks like you just need to adjust the “Move” actions so the color-fill bar size is calculated to the center of the drag handle (e.g., “(dragHandle.left + dragHandle.width/2)” and double-check the boundaries set for dragHandle’s OnDrag action. Also, make sure the outer dynamic panel is set to “Fit to Content”.


Bless your heart! I’ve been on this for a few hours :slight_smile:
Thank you so much!