Unable to move a slider in Firefox 47.0 browser using selenium webdriver and java

Question

Unable to move one end of a slider to other end in Firefox browser. But found that the element at one end is clicked but not moved to other end.

Used versions: Firefox: 46.0 and 47.0 Selenium: 2.53.1

html code before moving the slider:

<div class="Slider">
<form name="sliding" action="/sm/performance/slideItem/34912/978310/10445054" method="post">
<div id="moveSlider" style="margin:auto;" data-slide-on="false" data-slide-inactiveicon="url('/sm/resources/styles/common/sliderButton/arrow_button.svg')" data-slide-activeicon="url('/sm/resources/styles/common/sliderButton/move_button.svg')">
<div class="slide-slideWrapper" style="height: 50px; width: 300px;">
<div class="slide-slideButton" style="border-radius: 50px;">
<div class="slide-inner" style="width: 551px; margin-left: -245px;">
<div class="slide-off" style="height: 50px; width: 275px; line-height: 50px;">Slider Moved!</div>
<div class="slide-slider" style="height: 40px; width: 40px; margin-left: -25px; background-image: url(&quot;/sm/resources/styles/common/sliderButton/arrow_button.svg&quot;); background-position: center center; border-radius: 50px; margin-top: 5px;"></div>
<div class="slide-on" style="height: 50px; width: 275px; margin-left: -25px; text-indent: 16.6667px; line-height: 50px;">Move right to slide</div>
</div>
</div>
</div>
</div>
</form>
</div>

html code after moving the slider:

<div class="Slider">
<form name="sliding" action="/sm/performance/lockBooks/34912/978310/10445054" method="post">
<div id="moveSlider" style="margin:auto;" data-slide-on="false" data-slide-inactiveicon="url('/sm/resources/styles/common/sliderButton/arrow_button.svg')" data-slide-activeicon="url('/sm/resources/styles/common/sliderButton/move_button.svg')">
<div class="slide-slideWrapper"style="height: 50px; width: 300px;">
<div class="slide-slideButton" style="border-radius: 50px;">
<div class="slide-inner" style="width: 551px; margin-left: 0px;">
<div class="slide-off" style="height: 50px; width: 275px; line-height: 50px;">Slider Moved!</div>
<div class="slide-slider" style="height: 40px; width: 40px; margin-left: -25px; background-image: url(&quot;/sm/resources/styles/common/sliderButton/lock_button.svg&quot;); background-position: center center; border-radius: 50px; margin-top: 5px;"></div>
<div class="slide-on active" style="height: 50px; width: 275px; margin-left: -25px; text-indent: 16.6667px; line-height: 50px;">Move right to slide</div>
</div>
</div>
</div>
</div>
</form>
</div>

Code we've tried to move the slider:

By sliderBar = By.xpath("//div[@id='Slider']//div[contains(text(), 'slider')]");
By slider = By.xpath("//div[@id='Slider']//div[@class='slide-slider'][contains(@style, 'button.svg')]");

WebElement sliderBarEle = driver.findElement(sliderBar);
int sliderWidth = sliderBarEle.getSize().getWidth();

WebElement sliderEle = driver.findElement(slider);
Actions action = new Actions(driver);
action.clickAndHold(sliderEle);
Thread.sleep(3000);
action.moveByOffset(sliderWidth, 0).build().perform();

Answer 1

I usually have better luck moving sliders with the SendKeys method, and sending either a RightArrow or LeftArrow. I find that with most sliders they respond better to an arrow key press rather than a mouse drag/move. See this post on how to do this.