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

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

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

キーポイント：

純粋なCSSとネイティブHTML

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

ただし、

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

<input type="range">範(fàn)囲入力要素の構(gòu)造

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

Firefoxのもう1つ：

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

つまり、3番目の実裝もありますが、幸運(yùn)なことに、このブラウザはほとんどなくなっています！ブラウザ間のこの矛盾は、実裝ごとに異なるスタイルを提供する必要があるため、タスクを困難にします。この投稿が終了することはないので、これについては詳しく説明しませんが、Ana Tudorによるこの投稿をより詳細(xì)な調(diào)査のために読むことを強(qiáng)くお?jiǎng)幛幛筏蓼梗ㄍ陡濂辚螗驋啡毪工氡匾ⅳ辘蓼梗g裝に関係なく、「スライダー」（親指）は常に共通のコンポーネントであることを覚えておく必要があります。

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

カスタム入力要素

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

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

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

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

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

スライダー要素スタイルを設(shè)定します

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

魔法の効果を追加します

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

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

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

input {
  --c: orange; /* 活動(dòng)顏色 */
  --g: 8px; /* 間隙 */
  --l: 5px; /* 線粗細(xì) */
  --s: 30px; /* 滑塊大小 */

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

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

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

結(jié)論box-shadowspread

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

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

以上がCSSを使用してカスタムレンジスライダーを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。