0 votes
1 view
in DevOps and Agile by (19.8k points)

I want to automate the Range Slider based on the given parameter values. I just tried with Actions class but facing the problem in calculation of moving xOffset value.

Code what I have tested.

void automateApplication( RemoteWebDriver driver ) {

    driver.get( "http://rangeslider.js.org/" );


    //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 {



    } catch (java.io.IOException e) {






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();



Observed from the Ranged slider application.

<section id="top">

    <input type="range" min="10" max="1000" step="10" value="300" data-rangeslider="" 

        style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;">

    <div class="rangeslider rangeslider--horizontal" id="js-rangeslider-0">

        <div class="rangeslider__fill" style="width: 529.495px;"></div>

        <div class="rangeslider__handle" style="left: 509.495px;"></div>


    <output id="js-output">980</output>


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"



For more information look at this image:

enter image description here

I tried to automate http://rangeslider.js.org/ by changing the value of input field, using the below code.

var ele = $('input[type="range"]');


But I didn't want to change the value of the input field, just need to change the slider based on its handle rangeslider__handle or rangeslider rangeslider--horizontal.

1 Answer

0 votes
by (63.4k points)

I have tried with action class and javascript executor. But Java script executor is working with 100% accuracy. But action class is not 100% accurate. Find the below code for details. Better, you can use javascript.


    public void testSlider(){

        System.setProperty("webdriver.chrome.driver", "C:\\Projects\\SeleniumDrivers\\chromedriver.exe");

        WebDriver driver= new ChromeDriver();



        //To slide using action class

        slide(driver, 500);

        //To slide using jQuery

        slideUsingJQuery(driver, 100);


  public void slide(WebDriver driver, int value){

        WebElement slider=driver.findElement(By.id("js-rangeslider-0"));

        WebElement sliderHandle=driver.findElement(By.cssSelector("#top .rangeslider__handle"));

        int width=slider.getSize().getWidth();

        int x=(int)Float.parseFloat(sliderHandle.getCssValue("left").replace("px", ""));


        float min=10;

        float max=1000;

        float offsetX=width/(max-min)*value;


        new Actions(driver).dragAndDropBy(sliderHandle, -x, 10).dragAndDropBy(sliderHandle, (int)offsetX, 10).perform();


    public void slideUsingJQuery(WebDriver driver, int value){

        WebElement slider=driver.findElement(By.cssSelector("input[type='range']"));

        ((JavascriptExecutor)driver).executeScript("$(arguments[0]).val("+value+").change()", slider);​​​​​​​


I hope this helps you! 

If you are interested to learn Selenium on a much deeper level and want to become a professional in the testing domain, you should enroll yourself in industry-based Selenium online courses!

Welcome to Intellipaat Community. Get your technical queries answered by top developers !