cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Fam
Regular Visitor

How to configure slider in web page

For example, I would like to config the slider in the below web page, which involed 1. clicking on the correct tick box and 2. drag the slide to a specific value (there is no text box to enter the value, so I have to drag until the correct minimum and maximum).

 

Thank you in advance. 

 

URL: https://www.sgx.com/securities/stock-screener

Fam_0-1633756038412.png

 

1 ACCEPTED SOLUTION

Accepted Solutions
PAG
Resolver I
Resolver I

There have been discussions regarding when to use Web Automation vs. JavaScript function.

 

I think this is a case where JavaScript wins. It's really easy to implement and update values once you know the method. Done with just two flow actions:

 

How to configure slider in web page.PNG

 

See actions, JavaScript and notes:

https://power.automate.gallery/qMl8GuIC0cD3 

View solution in original post

3 REPLIES 3
shindomo
Continued Contributor
Continued Contributor

Hello @Fam 

 

It was more difficult than I think...

At first, I found that the <div> tag of slider circle handle has attribute "aria-valuenow", so I tried to change its value using action "Run JavaScript function on web page", but I had not succeeded.

 

So I decided to change the approach, and try to drag the slider handle with the mouse.

For now, I need to know the coordinates (X, Y) of the UI element.

Referring to the documentation below, I was able to get them:

Get the coordinates and size of a web element - Power Automate | Microsoft Docs

 

To emulate the drag operation of mouse, I used actions below:

"Move mouse (to the X, Y coordinates of UI element)"

"Send mouse click (Left button down)"

"Move mouse (increase X value to move it to right direction)

"Send mouse click (Left button up)"

 

It's not beautiful, but it worked anyway...

 

Screenshots of my example flow:

 

shindomo_0-1633810984936.png

shindomo_1-1633811035053.png

 

As a result, I could change the min value of "Tot. Rev ($M)" by moving the slider handle 200 pixels to the right from its initial position:

 

shindomo_5-1633811815964.png

 

However, as you may have already noticed, the minimum / maximum value of the slider varies depending on each item, so you have to calculate how much you need to move the mouse left and right in order to set it to the target value. Also depending on the environment of the machine that is running this flow, the position and scale of X and Y may change.

 

In my personal opinion, it can be difficult to develop a flow having production quality with above approach...

 

Thank you.

PAG
Resolver I
Resolver I

There have been discussions regarding when to use Web Automation vs. JavaScript function.

 

I think this is a case where JavaScript wins. It's really easy to implement and update values once you know the method. Done with just two flow actions:

 

How to configure slider in web page.PNG

 

See actions, JavaScript and notes:

https://power.automate.gallery/qMl8GuIC0cD3 

View solution in original post

shindomo
Continued Contributor
Continued Contributor

Hello @PAG 

 

You are awesome! The code you shared with us works just fine.

 

I have to learn more about how to write JavaScript code and how to inspect what method is used in the web page...

 

Thank you.

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (3,030)