How to move a slidercontrol programatically with CefSharp

Question

Hello,

I have tried for a while to manipulate a slider control in a CefSharp browser. I have succeeded using actual MouseButton/MoveCursor/SendMouseMoveEvent etc events.

However, I had some problems using those as it will not be accurate (due to the physical movements with the mousecursor where the 2 green circles with overlap eachother) and now I am struggling to move the below slider purely programatically instead. By manipulating the javascript. (It is the round green control where red arrow is pointing to)

I am using "Inspect Element" in the usual Chrome Browser control to get a clue of what I need to do.
When manually moving this slidercontrol with the mouse, one will see that a value is changed in the purple textbox(24h Fee $ (annual %)).
That value must change to get the complete functionality that I am trying to do.

I have succeeded to move this slidercontrol to the left with the below code (style.left = '5.1%'). But the slider is only moving to the left but the purple textbox(24h Fee $ (annual %)) is not changing any value which is my whole problem.

var response = await browser.EvaluateScriptAsync(@"(function () { document.getElementsByClassName('" + "irs-handle from" + "')[0].style.left = '5.1%';  })();");  

Is it possible to figure out what is needed to be done more purely programatically in order to trigger so the value is changing in the purple textbox when the slider is moving to the left with below code?

Thank you!

    using CefSharp;  
    using CefSharp.WinForms;  
          
    public ChromiumWebBrowser browser;  
    public void InitBrowser()  
    {  
        Cef.Initialize(new CefSettings());  
        browser = new ChromiumWebBrowser("https://uniswapv3.flipsidecrypto.com");  
        this.Controls.Add(browser);  
        browser.Dock = DockStyle.Fill;  
    }  
    public Form1()  
    {  
        InitializeComponent();  
        InitBrowser();  
    }  
    private void button1_Click(object sender, EventArgs e) { new Thread(moveSliderControl).Start(); }  
    async void moveSliderControl()  
    {  
        var response = await browser.EvaluateScriptAsync(@"(function () { document.getElementsByClassName('" + "irs-handle from" + "')[0].style.left = '5.1%';  })();");  
    }  

Answer 1

This js code seems to only modify the css style of this slider and will not trigger any events.

I think that although the method you used in the previous thread encountered an error, it was in the right direction, so I made some modifications based on this.

The X value is correct, so we only need to get the correct Y value.

   //js  
    var distanceFromTop = el.getBoundingClientRect().top;   

Complete code:

        void moveSliderControl()  
        {  
            var scriptTask = browser.EvaluateScriptAsync(@"  
                             var play = document.getElementsByClassName('irs-handle from')[0]  
                             function findPos(obj)  
                             {  
                                 var curtop = obj.getBoundingClientRect().top;   
                                 var curleft = 0;  
      
                                 if (obj.offsetParent)  
                                 {  
                                     do  
                                     {  
                                         curleft += obj.offsetLeft;  
                                     } while (obj = obj.offsetParent);  
      
                                     return { X: curleft,Y: curtop};  
                                 }  
                             }  
                             findPos(play)"  
                  ).ContinueWith(x =>  
                  {  
                     // 2. Continue with finding the coordinates and using MouseClick method   
                     // for pressing left mouse button down and releasing it at desired end position.  
                     var responseForMouseClick = x.Result;  
                      if (responseForMouseClick.Success && responseForMouseClick.Result != null)  
                      {  
                          var xy = responseForMouseClick.Result;  
                          var json = JsonConvert.SerializeObject(xy).ToString();  
                          var coordx = json.Substring(json.IndexOf(':') + 1, 3);  
                          var coordy = json.Substring(json.LastIndexOf(':') + 1, 3);  
  
                          //Now click and drag slider to the right  
                          MouseLeftUp(int.Parse(coordx)+5, int.Parse(coordy)+5);  
                      }  
                  });  
  
        }  
        private void MouseLeftUp(int v1, int v2)  
        {  
            var host = browser.GetBrowser().GetHost();  
            host.SendMouseClickEvent(v1, v2, MouseButtonType.Left, false, 1, CefEventFlags.None);  
  
            for (int i = 0; i < 7; i++)  
            {  
                v1 = v1 + i * 2;  
                host.SendMouseMoveEvent(v1, v2, false, CefEventFlags.LeftMouseButton);//Move the mouse  
                Thread.S*leep(1000);  
            }  
            host.SendMouseClickEvent(v1, v2, MouseButtonType.Left, true, 1, CefEventFlags.None);  
        }  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.