title: How do interact correctly with a range input (slider) in Cypress?
body: <p>I'm writing my bachelor thesis about e2e testing in javascript althought I'm not familiar with testing or javascript.</p>
  
  <p>So I have this the range input "slider" from the src </p>
  
  <pre><code>&lt;input id="sum_slider" class="input-range js-inv-calc-input-sum-range js-input-range" type="range" name="investmentsum" min="20000" max="150000" value="20000" step="1000" title="Investitionsbetrag" style="background: -webkit-linear-gradient(left, rgb(255, 196, 0) 0%, rgb(255, 196, 0) 0%, rgb(119, 119, 119) 0%) no-repeat;"&gt;
  </code></pre>
  
  <p>Cypress Documentation suggests this</p>
  
  <pre><code>cy.get('input[type=range]').as('range')
    .invoke('val', 25)
    .trigger('change')
  
  cy.get('@range').siblings('p').should('have.text', '25')
  </code></pre>
  
  <p>I tried: </p>
  
  <pre><code> cy.get('#sum_slider[type=range]').as('range')
  .invoke('val', 0%)
  .trigger('change')
  </code></pre>
  
  <p>I choose the percent values because the two last percent values are the only one, which changes by using the slider manually.
  Has someone same problems with that slider shit out there?
  thank you for your help!</p>