英文:
Disabling drag functionality in slider beyond certain value
问题
我正在创建一个滑块，其值范围从0到100，但用户只能在2到100之间拖动，0到2之间的空间仍然应该在UI上可见。如何在值达到2时停止拖动功能？
<Slider
aria-label='DiceRoll'
defaultValue={50}
step={1}
min={0}
max={100}
value={
overUnder ? Number(flippedTargetNumber) : Number(targetNumber)
}
marks={marks}
onChange={handleSelectionChange}>
我尝试使用 min={overUnder ? 2 : 0} max={overUnder ? 98 : 100} 但这只限制了整个滑块，不完全反映我想要做的事情。
英文:
I'm creating a slider that ranges its value from 0 to 100, but users should only be able to drag between 2 to 100, the space between 0 and 2 should still be visible on the UI. How can I stop the dragging functionality once the value reaches 2?
<Slider
aria-label='DiceRoll'
defaultValue={50}
step={1}
min={0}
max={100}
value={
overUnder ? Number(flippedTargetNumber) : Number(targetNumber)
}
marks={marks}
onChange={handleSelectionChange}>
I tried using min={overUnder ? 2 : 0}
max={overUnder ? 98 : 100}
but that just limits the entire slider entirely and doesn't exactly reflect what I'm trying to do.
答案1
得分: 0
保持min和max属性为0和100。
通过handleSelectionChange函数更改用户可以如何操作该值，确保不会将值设定为小于2。
const handleSelectionChange = (value) => {
if (value > 2 && value <= 100) {
setTargetNumber(value); // 我假设这是你的设置函数
}
}
英文:
Keep the min and max props as 0 and 100.
Change how the user can manipulate the value through your handleSelectionChange function, making it not ever setting a value below 2
const handleSelectionChange = (value) => {
if (value > 2 && value <= 100) {
setTargetNumber(value); // I'm assuming this is your setter
}
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论