Set color to value when slider position has changed

advanced-prototyping
#1

Hi,

I’m trying to implement a feature where a circle’s color dynamically changes based on the position of a slider. Specifically, I want the color’s lightness to correspond to the slider’s position. For example, if the slider is set at 50%, I’d like the circle’s lightness to be exactly 50%.

I’ve been digging into the documentation and experimenting with Axure, but I’m having trouble figuring out the right approach to achieve this. Has anyone else tried something similar or could offer guidance on how to achieve this effect? Any insights, tips, or even sample code snippets would be greatly appreciated.

Thank you in advance for your help!

Best regards

#2

You can use the position of your slider “thumb” relative to the slider “track” (maximum range of moving the slider thumb) to calculate the range percentage, where the leftmost position is 0% and the rightmost position is 100%. Use this percentage as the value in a Set Opacity action. Here is a quick demo:

Slider controls opacity percentage.rp (57.4 KB)

I made a blue circle and a slider. I also made a rectangle widget in the background with the same blue fill as the circle, so it can serve as a reference color at 100% opacity, and also demonstrate the circle in front is indeed changing opacity (transparency.)

The slider is a dynamic panel which includes:

  • Slider Track, a rectangle widget with rounded corners (could have also used a line or any widget, really.)
    • This sets the width–or maximum slider range–and if you change its width everything should still work the same.
  • Some tickmark lines set at 25%, 50%, and 75% just for demonstration and testing purposes.
  • Slider Thumb, a dynamic panel with an ellipse and a few “grabber lines”

    • This dynamic panel controls everything. See its Interaction code:

    • image

    • // where “TRACK” is a local variable pointing to the Slider Track widget, and (This.width / 2) calculates the center of the Slider Thumb, and that center is the basis for the percentage of the full slider width.

    • The Set Text action is for demonstration and testing purposes, showing the range percentage or relative position of the slider thumb, and thus the opacity of the circle.

#3

Awesome, thank you! This helped a lot and is the perfect solution for my problem.

closed #4

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