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

This article details creating a multi-thumb slider in React and TypeScript that calculates the width between thumbs, ensuring sections don't overlap and always sum to 100%. The author needed this for an anime movie suggestion platform to allow users to weight different tags for prioritized recommendations.

The slider is built using a dynamic array of tags, each with a name and color. Initial widths are evenly distributed using Array.fill(). A TagSection component renders each section, including a draggable handle.

The core functionality involves handling onPointerDown (for both mouse and touch) to initiate dragging. pointermove and touchmove events track cursor movement, calculating the percentage change in width. Crucially, the code updates not only the dragged section's width but also adjusts the adjacent section's width to maintain the 100% total.

Several improvements are implemented:

• Preventing negative widths: A limitNumberWithinRange function ensures widths stay within 0 and the maximum possible width (sum of the section and its neighbor's initial width).
• Whole number percentages: The nearestN function rounds percentage changes to the nearest whole number for a cleaner UI.
• Handling zero-width sections: Sections with zero width are removed from the slider, preventing issues and simplifying the UI.

The CSS uses :first-of-type and :last-of-type pseudo-selectors for rounded corners and hiding the last slider button. The final result is a functional, visually appealing multi-thumb proportion slider.

The above is the detailed content of Let's Make a Multi-Thumb Slider That Calculates The Width Between Thumbs. For more information, please follow other related articles on the PHP Chinese website!