Incremental Slider

[marlonolram]

Hi all,

I’m trying to create an incremental slider which displays a number above the drag object. The number should range as follows:

Start at 0 then to 1000 (first increment) then in 500 increments up to a maximum of 10000

Ideally I would like this slider to be clickable too, so when a user clicks on any increment, the slider would travel to that point and display the correct increment.

I’ve cobbled together the .rp file attached from some very helpful posts but I’ve lost my way with the maths and clickable bit! I’m not sure of the best method to make this work? I’ve pretty happy with the way the drag object slides and snaps to increment, just need to get maths and clickable bit correct.

so any assistance with this would be most awesomely appreciated
incrementalSlider.rp (83.1 KB)

[Anthony_Axure]

Hey there Hong Kong Phooey,

At the bottom of this post you’ll find an edited version of your RP file. Pop it open and read on.

To get the text on the “displaySumInsured” text field to change as the “sliderThumb” dynamic panel is dragged, I set up several conditional cases under the "sliderThumb"s OnMove event that check to see which of the “increments” vertical lines the DP is being moved over:

To get the “sliderThumb” DP to move when the slider bar is clicked, I used the “saddlerySlider” DP’s OnClick event:

The Y value here is Target.y. “Target” is an object that refers to the widget being targeted by the action. Using this value maintains the “sliderThumb” DP’s current Y value.

The X value breaks down like this:

• Cursor.x is the cursor’s X value.

• (Target.width/2) is the width of the “sliderThumb” DP divided in two. Subtracting this value from Cursor.x lines the center of the DP–rather than its left edge–up with cursor. (Remember that coordinates are determined by a widget’s top-left corner.)

• This.x is the “saddlerySlider” DP’s X value. (‘This’ refers to the widget whose event is firing.) It’s necessary to subtract this value because coordinates for widgets inside DPs are relative to the boundaries of the DP, not the browser window. E.g., moving “sliderThumb” to X = 30 would place it 30px to the right of its parent DP’s left edge and not 30px to the right of the browser window’s left edge. Subtracting the parent DP’s X value accounts for this offset.

I hope that this is all clear. If you have any questions, please let me know.
incrementalSlider_EDIT.rp (88.8 KB)

[dkaragiannis]

Hello there,

first of all i want to thank every person here that brings so much value, knowledge, inspiration and amazing support from and for very talented people here…amazing job, this forum is the best place you can find, thank you!!

Currently i work on a configuration prototype and i need to build a slider where the user can define how big in “m²” is his house, ideally with touch/drag support. The slider should start from 50m² up to 300m² in every 10 steps.

I checked your incremental slider and…wow…thats very extended and complex construct…i have no clue about js and variables, unfortunately.

Attached you will find my file from the slider.
For any assistance with this would be most awesomely appreciated.

Thanks in advance
slider_dk.rp (59.4 KB)

[Alex_Axure]

Hi dkaragiannis,

Welcome to the forum :). It looks like another user posted some information in response to this question, here:

https://www.axure.com/c/forum/7-0-tips-tricks-examples/12845-functional-slider.html#post69400

Were you able to give that a try? Building this kind of slider is definitely an advanced technique. And so to start off, it may help to read the documentation on using Variables and to check out the tutorial on setting up a simple slider first:

https://www.axure.com/support/training/slider-tutorial

https://www.axure.com/support/reference/variables

Considering the complexity of the described slider, I’d also recommend this article on using expressions in Axure RP:

https://www.axure.com/support/reference/math-functions-and-expressions

At that point, I’d also suggest similar methods mentioned by @mcsper (and @AnthonyAxure). Can you give that part a shot? Please don’t hesitate to elaborate on either forum thread with your findings, though, and we can take another look!

[dkaragiannis]

Hi Alex,

thank you so much for your answer and valuable information!
I will check your links and give my best to dive into this world of variables, math etc.

I hope to have something to share soon

BR,
Dimitrios

[josephxbrick]

Hi!

I created a “notched” slider widget that’s fairly easily customizable. Note that this is meant to be a reusable widget and not a tutorial on how to create such a widget. The code would be quite a bit simpler if it the idea was for it to be the latter. Here I was trying to solve for the general case rather than, say, solving for a specific numeric range with a specific number of notches.

Live sample

File: notched slider.rp (191 KB)

[Luxxer]

Joseph, Thanks for posting this widget. I have used it successfully. I would like to convert the number display to an text field and enable someone to input numbers to move the slider. Any ideas on how to do this?

[josephxbrick]

Hi!

It looks like the notch generation has broken badly since I posted this. (They’ve made a lot of changes since then.) I rewrote it so it’s working again.

I added a second page that lets you control the slider with a field (and the field updates when the slider moves.) Note that deleting this field will break the slider completely!

Let me know if you run into any issues:

notched slider.rp (381.7 KB)

Live sample

[fernando.maciel]

Really awesome! Saved me a lot of time. Thank you @josephxbrick!

[macacodocodigo]

Thank you so much for this, Joseph!

[system]

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.