title: Selenium: how to automate Range sliders
body: <p>I want to automate the <a href="http://rangeslider.js.org/" rel="nofollow noreferrer">Range Slider</a> based on the given parameter values. I just tried with <code>Actions class</code> but facing the problem in calculation of moving xOffset value.</p>
  
  <p>Code what i have tested.</p>
  
  
  
  <pre class="lang-java prettyprint-override"><code>void automateApplication( RemoteWebDriver driver ) {
      driver.get( "http://rangeslider.js.org/" );
      driver.manage().window().maximize();
      //Thread.sleep( 1000 * 60 * 1 );
  
      rangeSlidePointer("//div[@id='js-rangeslider-0']/div[2]", 147, 0);
  
      System.out.println("Enter something in console to quit the browser and driver.");
      try {
          System.in.read();
          System.in.read();
      } catch (java.io.IOException e) {
          e.printStackTrace();
      }
  
      driver.close();
      driver.quit();
  }
  void rangeSlidePointer( String locator, int xOffset, int yOffset ) {
      WebDriverWait explicitWait = new WebDriverWait( driver, 1000 * 60 * 2 );
      By findBy = By.xpath( locator );
      WebElement sliderElement = explicitWait.until(ExpectedConditions.elementToBeClickable( findBy ));
      Actions moveSlider = new Actions(driver);
      Action action = moveSlider.dragAndDropBy(sliderElement, xOffset, yOffset).release().build();
      // Actions action = moveSlider.moveToElement(sliderElement).clickAndHold().moveByOffset(xOffset,yOffset).release();
      action.perform();
  }
  </code></pre>
  
  
  
  <p>Observed form the Ranged slider application.</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;section id="top"&gt;
      &lt;input type="range" min="10" max="1000" step="10" value="300" data-rangeslider="" 
          style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;"&gt;
      &lt;div class="rangeslider rangeslider--horizontal" id="js-rangeslider-0"&gt;
          &lt;div class="rangeslider__fill" style="width: 529.495px;"&gt;&lt;/div&gt;
          &lt;div class="rangeslider__handle" style="left: 509.495px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;output id="js-output"&gt;980&lt;/output&gt;
  &lt;/section&gt;
  </code></pre>
  
  
  
  
  
  <pre class="lang-js prettyprint-override"><code>var elem = $x("//div[@id='js-rangeslider-0']")[0];
  var offset = elem.offsetLeft - elem.offsetParent.offsetLeft;
  console.dir( offset );
  
  var elem = $(".rangeslider__handle");
  var offset = elem.offset().left - elem.parent().offset().left;
  console.dir( offset );
  /*
  tagName|nodeName = "DIV"
      clientWidth, offsetWidth, scrollWidth = 560
      clientHeight, offsetHeight, scrollHeight = 30
  
  firstChild clientWidth = 419
             clientHeight = 20
  
  lastChild clientWidth = 40
            clientHeight = 40
  
  type="range" min="10" max="1000" step="10" value="300"
  update=760
  */
  </code></pre>
  
  
  
  <p>For more information see this image:</p>
  
  <p><a href="https://i.stack.imgur.com/1f3ww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1f3ww.png" alt="enter image description here"></a></p>
  
  <p>I need an answer with respect to <code>XPath</code> or using <code>Actions Class</code> so that i can automate the following URLs:</p>
  
  <p>Reference URL's</p>
  
  <blockquote>
    <p><a href="https://www.hdfcbank.com/personal/personal-loan-emi-calculator" rel="nofollow noreferrer">https://www.hdfcbank.com/personal/personal-loan-emi-calculator</a>
    <a href="https://www.icicibank.com/calculators/home-loan-emi-calculator.html" rel="nofollow noreferrer">https://www.icicibank.com/calculators/home-loan-emi-calculator.html</a>
    <a href="https://www.kotak.com/en/calculators/personal-loan-emi-calculator.html" rel="nofollow noreferrer">https://www.kotak.com/en/calculators/personal-loan-emi-calculator.html</a></p>
  </blockquote>
  
  <p>as @Murthi suggested i can automate <code>http://rangeslider.js.org/</code> by changing the value of input field, using the below code.</p>
  
  <pre class="lang-html prettyprint-override"><code>var ele = $('input[type="range"]');
  ele.val(50).change();
  </code></pre>
  
  <p>But i did't want to change the value of input field, just need to change the slider based on its handle <code>rangeslider__handle</code> or <code>rangeslider rangeslider--horizontal</code>.</p>