让我们制作一个多thumb滑块，以计算拇指之间的宽度

本文详细介绍了在React和TypeScript中创建一个多指数的滑块，该滑块计算拇指之间的宽度，确保部分不会重叠并始终汇总至100％。作者需要一个动漫电影建议平台，以允许用户加权不同的标签以获得优先的建议。

滑块是使用动态标签阵列构建的，每个标签都有名称和颜色。使用Array.fill()均匀分布初始宽度。 TagSection分量呈现每个部分，包括一个可拖动的手柄。

核心功能涉及处理onPointerDown （用于鼠标和触摸）以启动拖动。 pointermove和touchmove事件跟踪光标运动，计算宽度的百分比变化。至关重要的是，代码不仅更新了拖动部分的宽度，还可以调整相邻部分的宽度以维持100％的总数。

实施了几项改进：

• 预防负宽度： limitNumberWithinRange函数可确保宽度保持在0之内，最大可能的宽度（截面及其邻居的初始宽度之和）。
• 整数百分比： nearestN功能将百分比更改为清洁UI的最接近的整数。
• 处理零宽的部分：从滑块中删除零宽度的部分，防止问题并简化UI。

CSS使用:first-of-type :last-of-type伪选择器，并隐藏了最后一个滑块按钮。最终结果是功能性的，视觉上吸引人的多指数滑块。

以上是让我们制作一个多thumb滑块，以计算拇指之间的宽度的详细内容。更多信息请关注PHP中文网其他相关文章！