Moving slider with Cypress

[punisher49]

I've got a Slider component from rc-slider and I need Cypress to set the value of it.

<Slider
 min={5000}
 max={40000}
 step={500}
 value={this.state.input.amount}
 defaultValue={this.state.input.amount}
 className="sliderBorrow"
 onChange={(value) => this.updateInput("amount",value)} 
 data-cy={"input-slider"}
 />

This is my Cypress code:

it.only("Changing slider", () => {
    cy.visit("/");
    cy.get(".sliderBorrow")
      .invoke("val", 33000)
      .trigger("change")
      .click({ force: true })
  });

What I've tried so far does not work. Starting point of slider is 20000, and after test runs it goes to 22000, no matter what value I pass, any number range

[DanielStoica85]

@punisher49 Did you manage to find a solution for this?

[punisher49]

Hi @DanielStoica85 I could solve it on StackOverflow, here is the solution:

[punisher49]

https://stackoverflow.com/questions/64855669/moving-slider-with-cypress

[dinualx]

Hello, I also came across a challenging slider to move from my point of view, it's on kiwi.com, if you select nomad flight type then at trip length a slider with 2 handles appears.

I haven't tried with the solution indicated above, I saw that a bunch of configuration has to be made, I'll do that but until that if any of you guys has the configuration already in place and it can give it a shot with this slider I would appreciate.
I've tried with something like this:

cy.get('[data-test="SliderHandle-0"]').invoke("attr", "style", "left: 25% ").invoke("attr", "aria-valuenow", "16").trigger("change")
cy.get('[data-test="SliderHandle-0"]').invoke("attr", "aria-valuenow").should("eq", "16")

Seems that there is something that I'm doing wrong since the handle doesn't actually move to the specific value.
This is how it looks when the code is executed.

I would appreciate if you could take a look on this.

The only way I managed to move the 2 sliders was in a hardcoded way, meaning that I created a map between numbers corresponding to the values I want to configure and these are mapped to different screen positions, but this depends on the screen resolution and it would act differently on a screen with different resolution than mine.

The mapping looks like this:

leftHandleTransformToCoordinateFromDay(dayNumber){

    var coordinates = {
        
        '1' : '50.4', '2' : '63.2', '3' : '75.9833', '4' : '88', '5' : '100.8', '6' : '113.583', '7' : '125.6', '8' : '138.4',
        '9' : '151.183', '10' : '163.2', '11' : '176', '12' : '188.783', '13' : '200.8', '14' : '213.6', '15' : '226.383', '16' : '238.4', '17' : '251.2', '18' : '263.983',
        '19' : '276', '20' : '288.8', '21' : '301.583', '22' : '313.6', '23' : '326.4', '24' : '339.183', '25' : '351.2', '26' : '364', '27' : '376.783', '28' : '388.8',
        '29' : '401.6', '30' : '414.383', '31' : '426.4', '32' : '439.2', '33' : '451.983', '34' : '464', '35' : '476.783', '36' : '489.583', '37' : '501.6', '38' : '514.4',
        '39' : '527.183', '40' : '539.2', '41' : '552', '42' : '564.783', '43' : '576.8', '44' : '589.6', '45' : '602.383', '46' : '614.4', '47' : '627.2', '48' : '639.983',
        '49' : '652', '50' : '664.8', '51' : '677.583', '52' : '689.6', '53' : '702.4', '54' : '715.183', '55' : '727.2', '56' : '740', '57' : '752.783', '58' : '765.6',
        '59' : '778.4', '60' : '791.183',
        
     

    }

    return coordinates[dayNumber]
}

And how I managed to move the handle:

let coordinate1 = dateUtils.leftHandleTransformToCoordinateFromDay(dayNumber1)

cy.get('[data-test="SliderHandle-0"]').trigger('mousedown', {button:0}, { force: true })
.trigger("mousemove",{clientX: coordinate1, clientY: 0, screenX: 13, screenY: 0, pageX: 13, pageY: 0 }, { force: true })
.trigger("mouseup", {force:true})