Axure Tutorial: High-Fidelity Dynamic Slider
Introduction
Slider is a common control in the prototype. Because there is no high-fidelity dynamic slider in the default widget library of Axure, this tutorial mainly introduces how to make a high-fidelity dynamic slider.
Features to be Realized
1. When you drag the slider knob, the width of the slider bar changes with the knob.
2. The number of slider knob varies from 0 to 100.
3. The color of the slider bar changes according to the width of the slider bar.
How to Realize these Features
1. Create the knob as a dynamic panel. When you drag the knob, the width of the slider bar changes with it.
2. When dragging the knob, the number changes with the dragging distance. Set the formula to make the range of the number 0-100.
3. When the number changes, set the default, selected and disabled states of the slider bar to change the color.
Preview the completed prototype for this tutorial
Widgets Setup
In this tutorial, we will make the most complex case, that is, slider with bubble and changing colors.
1. Make a Bg bar and a slider bar with tow rectangles, and set the round corner to the maximum; Then make a Knob with a circle and create it as a dynamic panel; name the dynamic panel knob; make a number with bubbles and create it as a dynamic panel.
Knob Dragged Interactions Setup
1. When knob is dragged, knob moves with the X coordinate of the mouse. Here, the left and right boundaries need to be set. The left boundary should not be less than the X coordinate of Bg Bar - the width of Knob / 2; The right boundary shall not be greater than the right boundary of Bg Bar + the width of Knob / 2.
2. Set the width of the Sliding Bar to the X coordinate of the Knob - the X coordinate of the Sliding Bar + the width of the Knob / 2.
3. The Number Panel moves with the X coordinate of the mouse, and sets the X coordinate of the left boundary greater than Bg Bar - the width of the Number Panel / 2, and the right boundary less than the right boundary of Bg Bar + the width of the Number Panel / 2.
4. Then set the text of number as the width of Sliding Bar / the width of Bg Bar * 100 and round it to an integer.
Color Changing Interactions Setup
If the text of Number is less than or equal to 33, select Sliding Bar; If the text of Number is greater than 33 and less than or equal to 66, disable the Sliding Bar and enable the Sliding Bar; If the text of Number is less than or equal to 100 and greater than 66, set the state of the Sliding Bar to Error and enable the Sliding bar. In this way, the color of the Sliding Bar will change with the drag distance.
Finally, set the default text of number when Knob is loaded.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment