title: Toggle input type="range" in Robot Framework
body: <p>I have a 3-state togglable button. It's an input type=range, I need to write automatic test for my application. Can someone help me to find a way toggling the button in robot framework? Is there any keyword for doing such things?</p>
  
  <p>Here is the code of my button:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function togglebutton(range) {
  
          var val = range.value;
  
          if (val == 1) {
  
              //change color of slider background
              range.className = "no";
              range.id = "radio-no";
              range.checked = true;
  
              //alter text
              document.getElementById('span-selector').setAttribute("class", "wrong");
              document.getElementById('label-selector').setAttribute("for", "radio-no");
  
          } else if (val == 2) {
              //change color of slider background
              range.className = "neutral";
              range.id = "radio-neutral";
              range.checked = true;
  
              //alter text
              document.getElementById('span-selector').setAttribute("class", "natural-icon");
              document.getElementById('label-selector').setAttribute("for", "radio-natural");
  
          } else if (val == 3) {
              //change color of slider background
              range.className = "yes";
              range.id = "radio-yes";
              range.checked = true;
  
              //alter text
              document.getElementById('span-selector').setAttribute("class", "correct");
              document.getElementById('label-selector').setAttribute("for", "radio-yes");
          }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.radio-wrapper {
      width: 70px;
      display: inline-block;
      vertical-align: middle;
      background: rgba(114, 191, 68, 0.4);
      border-radius: 30px;
      position: relative;
      margin-left: 1%;
  }
  
  .correct {
      left: 15px;
      top: -5px;
  }
  
  .wrong {
      right: 17px;
      top: -5px;
  }
  
  .neutral-icon {
      left: 69px;
      top: -8px;
      opacity: .5;
  }
  
  label {
      z-index: 9;
  }
  
  input[type=range] {
      -webkit-appearance: none;
      margin: 0;
      width: 100%;
      padding: 0;
      outline: none;
      border: none;
  }
  
  input[type=range]::-ms-fill-lower {
      background: #777;
      border-radius: 10px;
  }
  input[type=range]::-ms-fill-upper {
      background: #ddd;
      border-radius: 10px;
  }
  
  input[type="range"]::-moz-range-track {
      background: none;
      border: none;
  }
  
  i {
      z-index: 99;
      font-size: 18px;
  }
  
  .neutral-icon i {
      font-size: 10px;
  }
  
  .neutral + label {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      left: 37%;
      transition: transform 1s;
  }
  
  .neutral::-moz-range-thumb, .no-style::-moz-range-thumb  {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgb(238, 238, 238);
      background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238, 238, 1)), color-stop(100%, rgba(204, 204, 204, 1)));
      background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
      background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
      background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
      background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
      -webkit-appearance: none;
      margin: 0;
      padding: 0;
      outline: none;
      border: none;
  }
  
  .yes + label {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      text-align: center;
  }
  
  .yes::-moz-range-thumb {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgb(32, 213, 50);
      background: -moz-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(32, 213, 50, 1)), color-stop(100%, rgba(28, 195, 1, 1)));
      background: -webkit-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
      background: -o-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
      background: -ms-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
      background: linear-gradient(to bottom, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
      -moz-animation-duration: 0.4s;
      -moz-animation-name: slidein;
      -webkit-animation-duration: 0.4s;
      -webkit-animation-name: slidein;
      animation-duration: 0.4s;
      animation-name: slidein;
      -webkit-transform: translateZ(0);
      -webkit-appearance: none;
      margin: 0;
      padding: 0;
      outline: none;
      border: none;
  }
  
  .no + label {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      right: 0px;
      text-align: center;
      margin-right: 0 !important;
  }
  
  .no::-moz-range-thumb {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: red;
      -moz-animation-duration: 0.4s;
      -moz-animation-name: slideno;
      -webkit-animation-duration: 0.4s;
      -webkit-animation-name: slideno;
      animation-duration: 0.4s;
      animation-name: slideno;
      -webkit-transform: translateZ(0);
      background: rgb(230, 108, 103);
      background: -moz-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 108, 103, 1)), color-stop(100%, rgba(221, 79, 75, 1)));
      background: -webkit-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
      background: -o-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
      background: -ms-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
      background: linear-gradient(to bottom, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
      -webkit-appearance: none;
      margin: 0;
      padding: 0;
      outline: none;
      border: none;
  }
  
  @keyframes slidein {
      from {
          transform: translate(25px, 0);
      }
      to {
          transform: translate(0px, 0px);
      }
  }
  
  @keyframes slideno {
      from {
          transform: translate(-25px, 0);
      }
      to {
          transform: translate(0px, 0px);
      }
  }
  
  @keyframes returnLeft {
      from {
          transform: translate(-50px, 0);
      }
      to {
          transform: translate(0px, 0);
      }
  }
  
  @keyframes returnRight {
      from {
          transform: translate(50px, 0);
      }
      to {
          transform: translate(0px, 0);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="pull-left"&gt;&lt;?php echo Language::T('Confirm'); ?&gt;&lt;/span&gt;
                      &lt;span class="pull-right"&gt;&lt;?php echo Language::T('Reject'); ?&gt;&lt;/span&gt;
                      &lt;div class="radio-wrapper"&gt;
                          &lt;span id="span-selector"&gt;&lt;/span&gt;
                          &lt;?php if ($row['state'] == 0)
                          {
                              $state = 2;
                          }
                          elseif ($row['state'] == 1)
                          {
                              $state = 3;
                          }
                          else
                          {
                              $state = 1;
                          } ?&gt;
                          &lt;input type="range" class="no-style" name="data[orderId][&lt;?= $row['orderId'] ?&gt;]"
                                 onchange="togglebutton(this);"
                                 min="1" max="3" value="&lt;?= $state ? $state : 2 ?&gt;"&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any keyword for doing such things?</p>