title: How can I drag the slider to the end and verify text box has value 20
body: <p>Here is the html snippets:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;Javascript Slider Control - Example&lt;/title&gt;
  
  
  
  &lt;link rel="stylesheet" type="text/css" href="example_files/slider.css"&gt;
  &lt;script type="text/javascript" src="example_files/addanevent.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="example_files/slider.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="example_files/slider-setup.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;
  
  Slider 1:
  &lt;div class="slider" id="slider01"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
      &lt;img style="left: 207px;" src="example_files/knob.png" height="15" width="31"&gt;
  &lt;/div&gt;
  Box 1:
  &lt;input id="output1"&gt;
  &lt;hr&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I want to drag the slider till the end and want to check whether the outbox box has the value of 20 or not.I searched for many things. Gone through many topics but could not get my answer. I didn't understand how can I set values for xoffset and yoffset. I just entered the value randomly and checked. Is there any procedure of getting the value of offsets. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>driver = Selenium::WebDriver.for :firefox
    driver.get(url)
    slider =  driver.find_element(:xpath, "//*[@id='slider01']")
    def verify_drag_drop_till_end
      driver.action.drag_and_drop_by(slider,120,0).perform
      sleep 1
      output_box = driver.find_element(:xpath, "//*[@id='output1']")
      puts output_box[:value]
    end  
  </code></pre>