How to do a reactive slider with quasar VueJS-CodePudding

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.

Code is available on Stackblitz

CodePudding user response：

To restrict the length of slider, you must set an inner-max value for it.
In your case, it should be:

 <q-slider
            v-model="item.value"
            :min="0"
            :max="10"
            :inner-max="points   item.value"
            @update:model-value="calculatePoints(item.title)"
 />

FYI: https://quasar.dev/vue-components/slider#with-inner-min-max