Framer Classic » Range slider » Knob positions vs. slider values

Knob positions vs. slider values

With the pointForValue() function you can get a readout of what would be a knob’s position for a particular value.

And valueForPoint() works the other way round: you give it a (hypothetical) position of a knob, and it will return the value this would generate.

These functions don’t change anything to the slider or knobs; they just return the numbers the slider uses internally. They are also the exact same functions as on a standard SliderComponent.

We have a default range slider:

slider = new RangeSliderComponent

With its default width of 300, default min value of 0, and default max of 1, the position for value 0.5 will be at 150 points.

# What would be the location of a knob
# for a value of 0.5?
print slider.pointForValue 0.5

» 150

This, of course, is what would be the x position of a knob inside its parent (the slider itself) and not the position of the knob on the screen. (For a vertical slider you will get a y value.)

And the valueForPoint() function does exactly the reverse.

# What would be the value for a knob
# that’s halfway (at 150 points)?
print slider.valueForPoint 150

» 0.5
Download Framer project

Leave a Reply