I’m trying to build filter slider, user should be able to drag slider and the number associated (amount of money) with the x.position of the slider should appear. It’s a quite popular pattern used in e.g. e-commerce.
I build simple slider: Untitled Document while moving the text field shows me x.coordinates, the problem is how translate these x.coordinates into numbers, e.g. the x.114 position should transforms and appears as 100$, x.115 as 115$.
I manage to translate coordinates to numbers but I don’t know how to set a start and stop points, e.g. start at 1000 and stop at 5000: Untitled Document
But now I’ wondering how to update the position of the slider based on the value type in by the user. How to translate the number into x coordinates of the slider position.
Use a percentage - the percentage that the entered number represents in the range (e.g, if the slider goes from 1000 to 5000, 3000 would be 50%) multiplied by the span that the thumb (the thing on the slider you drag) can travel.
You can do the following by referencing the location and sizes of objects on the screen using local variables to access properties (e.g. LVAR_slider.left; I strongly encourage this) but for simplicity’s sake, say you had the following global variables:
sliderLeft - the sliders left location
sliderWidth - the width of the slider in pixels
thumbWidth - the width of the thing you drag in pixels
sliderStartVal - 1000 (in the example above)
sliderEndVal - 5000
userEntryVal - the entered number
move thumb to [[sliderLeft + (sliderWidth - thumbWidth) * (userEntryVal - sliderStartVal)/(sliderEndVal - sliderStartVal)]]
[ul]
[li]The (sliderWidth - thumbWidth) part is the distance the thumb can travel.[/li][li](userEntryVal - sliderStartVal)/(sliderEndVal - sliderStartVal) gives you the percentage of the user entered value relative to the value range.[/li][/ul]
Here’s a sample file using local variables, a good thing to learn if you don’t already know them:
Thanks but slider need to work both sides you could mange to manipulate slider by drag it and slider should move when the value it typed in in the field.
Thanks but slider needs to work both sides you should be able to manipulate slider by drag it and slider should move when the value it typed in in the field