Axure Tips & Tricks - 10 | Interactive Range Slider component in Axure using repeater | Range Slider

How to create a interactive slider / Range slider in Axure RP
Slider Control in Axure RP
Step 1 - Setup and Naming the Widget
Step 2 - Add Interactions Dragged / Move to handle (Dynamic Panel)
Step 3 - Use Repeater to Setup Range Slider and Define Min Value, Max Value, and decimal value in repeater,
Step 4 - Set Text to show range slider value
Step 5 - Reusable range slider component is ready

Setting and displaying the value
[[ (Item.MinValue + (Handle.left - Track.left) / (Track.width - Handle.width) * (Item.MaxValue - Item.MinValue)).toFixed(Item.Decimal) ]]
Setting Size for fill:
Width : [[This.x - LVAR1.x]]
Height : [[Target.height]]

Free Download Axure Templates, Widget, Libraries, Themes, Useful Axure Bootstrap Widget libraries
https://www.curdweb.com/

Тэги:

#range_slider #interactive_range_slider #slider_with_values #range_slider_with_decimal_value #Axure_Tips_&_Tricks #curdweb #Math_function #formula_for_range_slider #Prototyping #How_to_create_a_simple_slider #How_to_create_a_Slider_Control_in_few_minutes #How_to_create_a_slider_in_Axure_RP_9_-_Prototyping #Axure_Slider_Widgets_Library #How_do_you_make_a_slider_in_axure? #Slider_Control_Tutorial #dragged_interaction_in_axure #move_interaction_in_axure #axure8 #axure9 #axure10 #dashboard

Скачать видео