デュアルハンドルHTML5スライダーのマルチレンジポリフィルサポート

の 新しいHTML 5範囲の入力 量や日付のような動的な選択に最適です。しかしデフォルトの範囲スライダー 複数のハンドルをサポートしていません.

入る マルチレンジ, ある 複数のハンドルをサポートするために作成されたpolyfill それは正しく機能し、すべての主要なブラウザをサポートします.

これは 無料ツール そしてそれは 複数のハンドルをネイティブに追加する, プラグインを使わずに。このポリフィルは 2つのリソース： JSファイル そして CSSファイル. 彼ら どちらも範囲入力で動作します そして、次のことができます 両方をダウンロードする メインのGitHubリポジトリから.

これは、ブラウザで作業する必要があることを意味します。 範囲入力をすでにサポートしています デフォルトで。また CSS変数が必要です すべてのブラウザでサポートされているわけではありません.

ありがたいことに、Multirange CSSフォールバックを使用します 1つではなく2つの範囲スライダが使用されています。これは完璧な解決策ではありませんが、それでも使用可能なインターフェースを提供します。プラス面では、これ 箱から出してすぐに動作 紐が付いていない.

ただ あなたのサイトにファイルを追加する そしてできるよ 使用 複数 属性 スライダーフィールドに。あなたもすることができます 入力値の範囲を設定する コンマで.

これが HTMLの簡単な抜粋 マルチレンジスライダを使う：

ハンドルはある場合もあります 互いを越えてドラッグ そしてさらに 互いの上に左. そしてまだレンジ入力 キーボードナビゲーションをサポート これはアクセシビリティに最適です.

全ての デモ そして ソースコードサンプル MultirangeのWebページで見つけることができますので、探しているならそれをチェックしてください。 複数範囲のHTMLスライダ.