How to build a filter slider?

advanced-prototyping
#1

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$.

Any ideas? I would appreciate any help.

#2

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

#3

Hi!

I posted a solution to this on another thread here. Let me know if this doesn’t work for you.

#4

Thanks, I find some nice solution on Axure forum provided by “thePsycho79”: http://www.axure.com/c/forum/advanced-prototyping/12681-axure-7-slider-bar-text-changes-cursor-moves.html

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.

Any ideas?

#5

Hi!

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:

Live Sample

File: adjust_slider_from_number.rp (58.8 KB)

Different Types of Slider
#6

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.

#7

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

#8

Oh - I thought you already had the dragging working.

closed #9
unlisted #10