How to do a reactive slider

Hello,

I’m using the component QSlider from Quasar 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.

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

You would need to update the max values for the sliders. So each sliders data should also have a max property. As you can imagine, the logic for that is going to get a bit complex as you have to account for each sliders current value in order to correctly reflect the possible max values for the other sliders.