How do I use selenium to change the value of a input[type='range']

Question

I have a slider that uses html5 on an input e.g.

<input id="sliderWidget" title="Slide me" type="range" min="1" max="1.6" step="0.3" value="1.3">

I have been trying to use selenium to change the slider but traditional image slider controls are not working for me.... e.g.

Action dragAndDrop = builder.dragAndDropBy(sliderWidget,0,30).build();
dragAndDrop.perform();

Does anyone have any ideas how i can perform this incremental range change

thanks in advance

Answer 1

You can select the element and use the send_keys method to send it the right/left arrow keys (which should increment/decrement the input). In Python:

from selenium.webdriver.common.keys import Keys
...
slider = page.find_element_by_id("sliderWidget")
for i in range(10):
  slider.send_keys(Keys.RIGHT)

That should increment the value by 10.

Answer 2

You can set the value direct in JavaScript:

WebElement slider = webDriver.findElement(By.id("sliderWidget"));
System.out.println(slider.getAttribute("value"));

JavascriptExecutor js = (JavascriptExecutor) webDriver;
js.executeScript("javascript:document.getElementById(\"sliderWidget\").value=1.5;");

System.out.println(slider.getAttribute("value"));

Notice that sliderWidget was set to 1.5 but result was 1.6. This way you can test that step=0.3 is working well.