Slider that increments value by 10, with max value of 10,000 and fill

I’ve already created one HOWEVER it increments by 20. How do I increment by 10, keeping in mind I must keep the current width of the slider bar.

Also, how do I fill in the bar as the slider slides to the right, and remove fill as slider slides to the left.

Thanks for any tips.

slider.rp (68.1 KB)

I figured out how to fill in the bar as the slider slides right and left. Used the set size function of left slider handle and right-most area.

Still need to figure out how to increment by 10 instead of 20. Here are more details:

**background of sliding area = 500px. **

**equation to set value of text field: [[ (handle.right - background.left) * 20 ]] **
essentially every time handle moves 1px it will multiply by 20, so text value starts at 20 (1 * 20), intervals of 20 and ending at 10,000 (500 * 20)

question again is, how do I set up an equation where the increment is 10 but keeping background width of 500px?

Hi!

First off, you just need two objects: the slider background and the handle. I deleted the hidden object there. The boundaries (that limit the handle’s movement) will now become:

left: greater than or equals background.left
right: less than or equals background.right

… where “background” is a local variable referring to the background object.

Next, you’ll want a way of specifying the maximum value that the slider will output no matter how wide the slider happens to be.

To make any slider output values between 0 and 1, use this expression for the value:

[[ (handle.left - background.left) / (background.width - handle.width) ]]

Important: That’s the handle’s current position (relative to the background) divided by the total distance that the handle can travel. The output when the handle is at the far left will be 0, because position 0 divided by any distance is 0. The far-right output will be 1, because the handle’s position at the far right - pretend that’s 50 - is equal to the total travel distance: also 50. Position 50 divided by total-travel-distance 50 equals 1. Position 25 divided by total-travel-distance 50 equals 0.5. And so on.

To make the output go from 0 to 250 instead of from 0 to 1, simply multiply the expression above by 250:

[[ (handle.left - background.left) / (background width - handle.width) * 250 ]]

Now, to make the slider to display every nth value, the expression would look like this:

[[ ( (handle.left - background.left) / (background.width - handle.width) * 250 / n ).toFixed() * n ]]

Substitute 10 for n in the expression above if you want it to display every 10th value, and make sure the parentheses add up!

Thanks for the help however the formula does not work for my max value of 10,000.

using the formula you provided:

[[ ( (handle.left - background.left) / (background.width - handle.width) * 10000 / 10 ).toFixed() * 10 ]]

I get the same result:

increment of 20 (I need 10), maxed out at 10,000

It will work for anything under max value of 5,000. I’m assuming since the background width is 500px.

slider.rp (68.3 KB)

Hi!

If you want a slider to show every value between 1 and 100, but that slider is only 20px long, then you won’t get every value as you drag, as the handle can’t move less than one pixel at a time. You are in the same situation with your slider.

To Increment by 10 simply remove the last digit and add a static zero.

Example
[[value1.toFixed(0).slice(0,-1)]]0
value1 is your dynamically changing variable

Here is a link to a working example I made. It doesn’t have the fill slider feature that you mentioned though.
https://forum.axure.com/t/slider-with-number-values/35235/5?u=josh_db

For the fill slider track, I would likely look to have a second slider track on top of the bottom slider track that dynamically changes width as you move the scroll button. That’s how I would do it. I don’t have time to add this into my file at the moment, but if you are able to understand what I did in my file, I’m pretty certain you can modify my file to achieve the fill slider track functionality.