Quasar VueJS多滑块总和限制：数值锁定后滑块仍可拖动求助

你遇到的问题根源是只在数值层面做了截断，但没同步约束滑块的可拖动范围。只要给每个滑块动态绑定max属性，让它的最大值等于总上限减去其他滑块的数值总和，就能同时从视觉和数值上限制拖动。

具体实现步骤：

• 定义总上限（比如maxTotal: 4）和存储滑块数值的数组（比如values: [0, 0]）
• 给每个QSlider的max属性绑定动态计算值：
  • 第一个滑块的max = maxTotal - values[1]
  • 第二个滑块的max = maxTotal - values[0]
• 无需额外的数值截断逻辑，因为动态max已经限制了滑块的可拖动范围

示例代码片段：

<template>
  <div>
    <q-slider
      v-model="values[0]"
      :max="maxTotal - values[1]"
      label
    />
    <q-slider
      v-model="values[1]"
      :max="maxTotal - values[0]"
      label
    />
    <p>总和: {{ values[0] + values[1] }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const maxTotal = ref(4)
const values = ref([0, 0])
</script>

这样调整后，当两个滑块的数值总和达到设定上限时，滑块会被限制在当前数值，视觉上也无法继续拖大，完全符合需求。

内容的提问来源于stack exchange，提问作者Caesius