CSSを使用してカスタムレンジスライダーを作成する方法

純粋なCSSはクールなカスタムレンジスライダーを作成します：JavaScriptは必要ありません。 この記事では、アクセシビリティを確保しながらJavaScriptに依存せずに、CSSとネイティブHTML

要素のみを使用してカスタムスコープスライダーを作成する方法を示します。チュートリアルでは、ブラウザのリセットや無効化など、入力要素をカスタマイズする方法をカスタマイズし、デフォルトスタイルの設定、スライダースタイルの設定、

を使用してスライドグラデーション効果の作成をカスタマイズします。さらに、微妙なアニメーションを追加してユーザーの相互作用を強化する方法について説明します。たとえば、クリック時にスライダーをボーダーのみの円から完全な円に変換したり、ホバリングしたときに色を暗くしたりします。このテクノロジーは、ネイティブの機能を保持し、キーボードナビゲーションをサポートしており、カスタムレンジスライダー向けの汎用性が高く簡単にアクセスできるソリューションを提供します。 <input type="range"> border-image

キーポイント：

純粋なCSSとネイティブHTML

要素を使用して、カスタムスコープスライダーを作成します。
• <input type="range">を使用してスライドグラデーション効果を作成します。
• 微妙なアニメーションを追加して、クリック時にスライダーの形状を変更したり、ホバリングしたときに色を変更したりするなど、ユーザーエクスペリエンスを強化します。 border-image
ネイティブ機能を維持し、キーボードナビゲーションをサポートして、アクセシビリティを確保します。
• デフォルトの範囲スライダースタイルは美しくありません。次の図は、Chrome、Firefox、およびSafariブラウザーのデフォルト範囲スライダーの表示効果を示しています。

ただし、

要素をスタイリングするのは難しいです。ほとんどのオンラインソリューションは、JavaScriptと冗長コードに依存しています。さらに悪いことに、一部のテクノロジーは、要素のアクセシビリティを破壊する可能性もあります。それでは、アクセシビリティに影響を与えることなく、純粋なCSSをよりよく利用して達成する方法を見てみましょう。次のCodepenデモンストレーションは、私たちが構築するものを示しています：Codepen link

<input type="range">範囲入力要素の構造

最初に範囲入力要素の構造を分析しましょう。これはネイティブ要素であり、各ブラウザには独自の実装があります。 2つの主な実装があります。1つはWebKitとBlinkブラウザー用（Chrome、Edge、Safari、Operaなど）：

Firefoxのもう1つ：

<input type="range" min="0" max="100" step="1" value="20">

つまり、3番目の実装もありますが、幸運なことに、このブラウザはほとんどなくなっています！ブラウザ間のこの矛盾は、実装ごとに異なるスタイルを提供する必要があるため、タスクを困難にします。この投稿が終了することはないので、これについては詳しく説明しませんが、Ana Tudorによるこの投稿をより詳細な調査のために読むことを強くお勧めします（投稿リンクを挿入する必要があります）。実装に関係なく、「スライダー」（親指）は常に共通のコンポーネントであることを覚えておく必要があります。

この要素のみをスタイルするだけで、カスタムスコープスライダーを簡単にカスタマイズできます。コードにまっすぐジャンプして、何が驚くべきか見てみましょう。

カスタム入力要素

最初のステップは、appearance: noneおよびその他の一般的なプロパティを使用して、すべてのブラウザのデフォルトスタイルをリセットおよび無効にすることです。

より複雑な場合、他のデフォルトスタイルが要素に適用されている場合、コードを追加する必要がある場合があります。視覚スタイルのない「裸の」要素があることを確認してください。また、いくつかのCSS変数を定義して、範囲スライダーのさまざまなバリアントを簡単に作成できるようにしましょう。

<input type="range" min="0" max="100" step="1" value="20">

このステップでは、スライダーとそのデフォルトスタイルのみが表示されます。

<input type="range" min="0" max="100" step="1" value="20">

スライダー要素スタイルを設定します

スライダー要素をスタイリングしましょう。基本的な設定から始めます：

魔法の効果を追加します

input {
  appearance: none;
  background: none;
  cursor: pointer;
}

次に、魔法のCSSトリックを使用してスライダーを完成させます。 border-image：の使用が含まれます

幻覚は、入力要素にborder-imageを追加し、より大きな値を使用することで完璧です。

input {
  --c: orange; /* 活动颜色 */
  --g: 8px; /* 间隙 */
  --l: 5px; /* 线粗细 */
  --s: 30px; /* 滑块大小 */

  width: 400px; /* 输入宽度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}

いくつかのアニメーションを追加しますoverflow: hidden

スライダーと対話するときに微妙なアニメーションを追加できますか？それは多くのコードを必要とせず、スライダーのUXを強化します。まず、クリック時にスライダーをボーダーのみの円から完全な円に変換します。これを行うには、値を追加します。

結論box-shadowspread

私たちはそれを行ったので、複雑なブラウザ関連の実装を処理する必要はありません！スライダー要素のセレクターを特定し、いくつかのCSSトリックを使用して、スライダーの全範囲をスタイリングしました。忘れないでください、私たちは

要素のみを使用しているので、ネイティブ機能を維持するため、アクセシビリティの問題を心配する必要はありません。スライダーは、問題なくキーボードナビゲーションをサポートしています。同じテクニックで作成されたスライダーの例を以下に示します。 codepen link

以上がCSSを使用してカスタムレンジスライダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。