親指の間の幅を計算するマルチサムスライダーを作りましょう

この記事では、親指間の幅を計算するReactとTypeScriptのマルチサンプスライダーの作成を詳述し、セクションが重複せず、常に100％に合計されないようにします。著者は、ユーザーが優先順位付けされた推奨事項のために異なるタグを重み付けることができるようにするために、アニメ映画の提案プラットフォームにこれを必要としました。

スライダーは、それぞれに名前と色のダイナミックなアレイを使用して構築されています。初期幅はArray.fill()を使用して均等に分布しています。 TagSectionコンポーネントは、ドラッグ可能なハンドルを含む各セクションをレンダリングします。

コア機能には、ドラッグを開始するためにonPointerDown （マウスとタッチの両方）を処理することが含まれます。 pointermoveおよびtouchmoveイベントは、カーソルの動きを追跡し、幅の変化率を計算します。重要なことに、コードはドラッグされたセクションの幅を更新するだけでなく、隣接するセクションの幅を調整して、合計100％を維持します。

いくつかの改善が実装されています。

• 負の幅の防止： limitNumberWithinRange関数により、幅は0以内と可能な最大幅（セクションの合計とその隣の幅）を保証します。
• 整数の割合： nearestN関数は、クリーンなUIの最寄りの整数に変化する割合を丸めます。
• ゼロ幅のセクションの処理：幅がゼロのセクションがスライダーから削除され、問題が防止され、UIが簡素化されます。

CSSは:first-of-typeおよび:last-of-type擬似選択装置を使用します。最終結果は、機能的で視覚的に魅力的なマルチサンプの割合スライダーです。

以上が親指の間の幅を計算するマルチサムスライダーを作りましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。