Let's Make a Multi-Thumb Slider That Calculates The Width Between Thumbs

本文詳細介紹了在React和TypeScript中創建一個多指數的滑塊，該滑塊計算拇指之間的寬度，確保部分不會重疊並始終匯總至100％。作者需要一個動漫電影建議平台，以允許用戶加權不同的標籤以獲得優先的建議。

滑塊是使用動態標籤陣列構建的，每個標籤都有名稱和顏色。使用Array.fill()均勻分佈初始寬度。 TagSection分量呈現每個部分，包括一個可拖動的手柄。

核心功能涉及處理onPointerDown （用於鼠標和触摸）以啟動拖動。 pointermove和touchmove事件跟踪光標運動，計算寬度的百分比變化。至關重要的是，代碼不僅更新了拖動部分的寬度，還可以調整相鄰部分的寬度以維持100％的總數。

實施了幾項改進：

• 預防負寬度： limitNumberWithinRange函數可確保寬度保持在0之內，最大可能的寬度（截面及其鄰居的初始寬度之和）。
• 整數百分比： nearestN功能將百分比更改為清潔UI的最接近的整數。
• 處理零寬的部分：從滑塊中刪除零寬度的部分，防止問題並簡化UI。

CSS使用:first-of-type :last-of-type偽選擇器，並隱藏了最後一個滑塊按鈕。最終結果是功能性的，視覺上吸引人的多指數滑塊。

以上是Let's Make a Multi-Thumb Slider That Calculates The Width Between Thumbs的詳細內容。更多資訊請關注PHP中文網其他相關文章！