- @stanko/dual-range-inputは、2つのネイティブHTML範囲入力を使用するネイティブのデュアル範囲入力ライブラリ。
- ネイティブ入力を使うことで、すべての基本的なインタラクションとアクセシビリティ機能を維持する。
- 約50行のJavaScriptとCSSで構成されている。
- なぜ必要か
- 生成的ドローイングツールでパラメータを調整するためのUIを使っており、最小スライダーと最大スライダーが必要。
- 既存のソリューションはJavaScriptに依存し、ドラッグやアクセシビリティ機能を再実装している。
- ネイティブHTML範囲入力を使い、トラックをクリックしたときには近いスライダーがその値へ移動する必要がある。
- 動作原理
- 2つの入力を横に並べて配置し、入力が変更されると2つの値の中間点を計算する。
- 最小値および最大値の属性を中間点に設定し、入力の幅を更新する。
- 入力サイズの調整
- 入力の幅を計算する際には、トラックが実際の入力幅より短い点を考慮する必要がある。
- 入力の幅にサムの幅を加えることで簡単に計算する。
- サムの追加幅を収めるために、入力ラッパーへパディングを追加する。
- クリック時のサム移動
- 入力は中間点で接するようにサイズ調整され、クリック時には近いサムがその値へ移動する。
- デバッグモードを有効にすると、中間点を簡単に確認できる。
- スタイリング
- CSSを使って範囲入力をスタイリングできる。
- トラックとサムのスタイリングは簡単で、トラック中央の接続部分では境界半径を取り除く。
- テーマ
- テーマを簡単に変更できるように、複数の変数を公開している。
- デフォルト値が用意されており、変数を上書きしてテーマを作成できる。
- グラデーション
- CSSグラデーションを使って選択された範囲を描画する。
--dri-gradient-position変数を使ってグラデーションを設定し、コード内で幅とともに更新する。
- 結論
- この投稿は考えを整理するためのものであり、ネイティブ要素を試してみようというきっかけになればうれしい。
1件のコメント
Hacker Newsのコメント
<input type=range>には二重の値を実装する必要があると考えており、Firefoxではハンドルをクリックしたときに値が1段階ずつ変わるバグがある