The slider in cypress invokes the changes , but the changes are not captured in the textbox

Question

The assertion to verify the selected value from the slider input fails, while the script runs, the slider position changes correctly but it doesn't take any effect on the textbox; the value in the box isn't updated.

describe('Validate the slidervalue', function() {

  it('Should assert the slider value correctly', function() {
    cy.visit('https://demoqa.com/slider')
    cy.get('input[type="range"]').invoke('val', 65).trigger('change')
    cy.get('#sliderValue').should('have.value', 65)

  })
})

Answer 1

I haven't figured out the problem with val() but stepup() works

it('Should assert the slider value correctly', function() {
  cy.visit('https://demoqa.com/slider')
  cy.get('input[type="range"]')
    .then($el => $el[0].stepUp(40) )  // steps = 65 - 25
    .trigger('change')
  cy.get('#sliderValue').should('have.value', 65)     // passes
})

---

Or with helper function

const stepTo = ($el, target) => {
  const step = $el[0].getAttribute('step') || 1
  const current = $el[0].value
  const diff = target - current
  const steps = Math.abs(diff * step)
  if (diff > 0) {
    $el[0].stepUp(steps)
  else {
    $el[0].stepDown(steps)
  }
}

it('Should assert the slider value correctly', function() {
  cy.visit('https://demoqa.com/slider')
  cy.get('input[type="range"]')
    .then($el => stepTo($el, 65) )  
    .trigger('change')
  cy.get('#sliderValue').should('have.value', 65)     // passes
})