How to do a reactive slider

[Preciousring]

Hello,

I'm using the component QSlider in order to sum multiple sliders while giving a maximum number of points that a user has to reach. For example : On one slider, I put two and the other one three, the total of 4 must not be exceeded. I have succeeded to block the number of the second slider at 2. The issue is that, although the number of the second slider is 2, visually I can continue to increase the value of my slider.

Is there someone who knows how to resolve this issue ?

Thanks in advance. (Sorry, English is not my native language)

Stackblitz: https://stackblitz.com/edit/quasarframework-kx4bfp?file=src/pages/IndexPage.vue

[MilosPaunovic]

Codepen is broken, please amend it first.

[Preciousring]

Sorry, I have updated the link.