Hello everybody,
I need help for 2 types of slider.
I can attach the images to explain better my issue.
Different Types of Slider
Hi Isabella,
If you haven’t prototyped sliders before, check out our slider tutorial here to get familiar with the basic setup. Once you’re comfortable with that, take a look around the forums to see whether there are some example files you can use to learn how to build what you’re looking for. Here are a few threads to get you started:
Sliders and variables
Slider that works on intervals and displays dynamic panel
Incremental Slider
Dual Range Slider
If you get stuck while building your slider, feel free to post your RP file here along with some questions. I’ll take a look and get back to you with some answers.
Slider color change (colour change of slider bar when wyber slides OnDragX)
IsaPepa
#4
Thank you.
I would like to change text value on the label, when I drag my cursor.
Here it is my rp file
Thank you!
Isabella
Slider.rp (386 KB)
Hi Isabella,
Take a look at the attached RP file and let me know whether this is the behavior you’re looking for.
Slider_EDIT.rp (385 KB) | See it live!
All of the magic here is happening under the “DragHandle” dynamic panel’s OnMove event. First, there’s a “Move” action targeting the “CurrentPosition” shape, moving it as the “DragHandle” DP is moved. Second, there’s a “Set Text” action that sets the text on the “CurrentPosition” shape based on the “DragHandle” DP’s position along its drag path (the width of the “LineSlider” line widget):
The math I’ve used here is a bit involved, but I’ll do my best to break it down.
The first bit, (This.x - LineSlider.x), is the part that tracks the “DragHandle” DP’s position along the "LineSlider"s width. (‘This’ is an object that refers to the widget whose event is firing.) The farther to the right it is, the higher that value will be.
The denominator’s purpose is to convert the total number of pixels that the “DragHandle” can move into increments on a 0-100 scale. The first part, (LineSlider.width-This.width), defines the total number of pixels that the “DragHandle” can move. Dividing that value by 100 gives us the increments. (Note: If you want to change the slider’s maximum value, just change ‘100’ to the new maximum.)
The resulting value won’t be an integer, so it needs to be rounded. The ‘toFixed’ JavaScript method allows you to define how many decimal places a numeric value is allowed to have. Setting it to 0 eliminates all decimal places, rounding the value to an integer.
I hope that all of this makes sense! if you have any questions, let me know.
dain_ger
#7
Anthony, this is one of the best & easiest implementations I’ve seen - it should be in the tutorials section!
I have one buggy question and two more advanced questions:
1 - on mobile (iOS) dragging the slider also drags the page slightly, and then it is almost impossible to slide back to the left as the page slides too. Can share the file if required.
2 - would love to include the ability for the ‘line’ to ‘fill’ as the slider is dragged along - so the left of the drag button is filled in colour and the right of the drag button is unfilled or white
3 - would also want to combine one of the other examples I’ve seen where a user can click on the ‘CurrentPosition’ element and edit the text directly and have the slider jump to the new position.
Thanks again - so glad I found this example!
Alyssa_Axure
#8
Hello! I checked out the prototype from Anthony’s post on iOS, and it does look like the whole page will slide with the slider if your finger is partially touching the slider and partially sliding the page. It doesn’t look like this happens on Android, but may be related to how you can swipe the page to move back and forth between pages in the browser. Are you seeing this happen just in the Safari browser, or also the Axure Share app?
For creating the illusion that the slider is filling with color, the post below should help:
And the one below has an example that lets you type to change the position of the slider:
Hopefully those help! 