This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Simon Griffeth
Posted Apr 15 - Read on Facebook

Wonder if I could get some help here. I've got a coupe of sliders and I want the numerical value to the right of the slider to match the value when you drag the slider. I've looked at some examples and still can't seem to get it. Thanks in advance!

8 Comments

Andrew Nalband

Hi Simon, you want a line like this. Here's a file with it.

Andrew Nalband

It basically says when you drag the price slider's knob, update the html of the priceValue layer to the value of your price slider. I'm also using the Math functions to round the result. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

Andrew Nalband

This will round it to 2 decimal places if you need that for currency

Simon Griffeth

Worked great! thanks Andrew Nalband!

Andrew Nalband

Oops, I forgot to attach the file, but I guess you got it working! :)

Brandon Faulkner

what if the priceValue was displayed in an input field and you wanted to be able to update the number via the input and have the knob's position bind to that value?

Andrew Nalband

I'd probably use the input module Jordan Robert Dobson made. Are you trying to make something like that, Brandon Faulkner?

Brandon Faulkner

yeah exactly. I'm in the process of rebuilding (because your solution was much more elegant and simple) but here's what I had originally: http://share.framerjs.com/dq6yo0nnw6u5/ trying to bind the two inputs so that when I edit the value of the text input it updates to the corresponding position of the slider knob

Read the entire post on Facebook