Increasing and Decreasing Slider Value
Hi, I'm currently in the process of creating a bpm slider. I have used the slide bar preset on justininmind and I added a text value on the left of it and set it to 30 (as 30 is the initial value).
What i'm trying to achieve is that whenever the slider is dragged to the right, it will increment by 1 and whenever it is moved to the left, the value would decrement by 1. The starting value is 30 and the maximum value is 150. I know that I just need to add a set value on the existing on Drag event but i don't know how to do the expression for it. I've attached an image for reference.
Files:
slider.png
Hello James,
I’m attaching a sample project(slider.vp) to demonstrate how you can build this interaction. Let me explain the project:
I started creating the slider from the already available widget on the Web Components library and then added a Label which value should be updated when the slider is dragged.
As you mentioned you will need to add a set value after the already defined Drag event. However, I’m also using some Variables so the expression is easier to read and modify in case you need to adapt your min(30) and max(150) values.
So first let’s initialize the variables. If you right click and select “Edit” on ‘Min’ and ‘Max’ variables you will notice that they are already assigned to 30 and 150, respectively.
Then, if you select the ‘X’ label you will see two actions triggered ‘OnPageLoad’.
The first action initialized the label’s value with the min value(30) from the 'Min' variable. The other action will calculate the value range of your slider(150-30 = 120) and save it on the ‘Range’ variable.
After initializing the variables, you can add the "SetValue" event and build the see “expression.png”).
This expression will give you a value from your value’s range(30-150), based on the % position of the dragged control. Being 0% when the control it’s at the most left position(0px) and 100% being the most right position(which you get subtracting the drag control width from the bar width, see sizes.png).
Notice that to avoid printing decimals on the value I used the “Round” function and select ‘0’ as the number of decimals shown.
Hope this can help you, and please let me know if you need further explanation.
Hello James,
I’m attaching a sample project(slider.vp) to demonstrate how you can build this interaction. Let me explain the project:
I started creating the slider from the already available widget on the Web Components library and then added a Label which value should be updated when the slider is dragged.
As you mentioned you will need to add a set value after the already defined Drag event. However, I’m also using some Variables so the expression is easier to read and modify in case you need to adapt your min(30) and max(150) values.
So first let’s initialize the variables. If you right click and select “Edit” on ‘Min’ and ‘Max’ variables you will notice that they are already assigned to 30 and 150, respectively.
Then, if you select the ‘X’ label you will see two actions triggered ‘OnPageLoad’.
The first action initialized the label’s value with the min value(30) from the 'Min' variable. The other action will calculate the value range of your slider(150-30 = 120) and save it on the ‘Range’ variable.
After initializing the variables, you can add the "SetValue" event and build the see “expression.png”).
This expression will give you a value from your value’s range(30-150), based on the % position of the dragged control. Being 0% when the control it’s at the most left position(0px) and 100% being the most right position(which you get subtracting the drag control width from the bar width, see sizes.png).
Notice that to avoid printing decimals on the value I used the “Round” function and select ‘0’ as the number of decimals shown.
Hope this can help you, and please let me know if you need further explanation.
Replies have been locked on this page!