JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでカスタム範囲スライダーを作成する方法【コード例付き】

CSSとJavaScriptを組み合わせることで、標準の要素をベースにしながら、見た目を自由にカスタマイズした範囲スライダー（レンジスライダー）を作成できます。スライダーのトラックの色や形状、つまみ（ハンドル）のデザインは、CSSの疑似要素を使って細かく調整可能です。

カスタム範囲スライダーの実装例

以下のコードでは、紫がかったトラックと黄緑色の丸いつまみを持つスライダーを実装し、スライドした値をリアルタイムで表示しています。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    .slidecontainer {
        width: 100%;
    }
    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #e478ff;
        outline: none;
        opacity: 0.7;
        -webkit-transition: 0.2s;
        transition: opacity 0.2s;
        border-radius: 20px;
    }
    .slider:hover {
        opacity: 1;
    }
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        border-radius: 50%;
        appearance: none;
        width: 45px;
        height: 45px;
        background: rgb(200, 255, 0);
        border: 6px solid rgb(0, 105, 44);
        cursor: pointer;
    }
    .slider::-moz-range-thumb {
        border-radius: 20px;
        width: 25px;
        height: 25px;
        background: rgb(200, 255, 0);
        border: 6px solid rgb(0, 105, 44);
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>Custom Range Slider Example</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" />
</div>
<h2 class="sliderVal">T</h2>
<script>
    var slider = document.querySelector(".slider");
    var output = document.querySelector(".sliderVal");
    output.innerHTML = slider.value;
    slider.oninput = function() {
        output.innerHTML = this.value;
    }
</script>
</body>
</html>

実装のポイント解説

1. スライダーの外観をリセットする

デフォルトのブラウザスタイルを無効化するため、-webkit-appearance: none; を指定します。これにより、独自のデザインを自由に適用できるようになります。

2. ブラウザごとのつまみのスタイリング

Chrome・Safari向けには ::-webkit-slider-thumb 疑似要素、Firefox向けには ::-moz-range-thumb 疑似要素を使って、それぞれつまみのサイズ・色・枠線を定義しています。両方を記述することで、主要ブラウザ間で一貫した見た目を実現できます。

3. ホバー時の演出

通常時は opacity: 0.7 で少し薄く表示し、マウスオーバー時に opacity: 1 へ遷移させることで、操作可能であることを視覚的に伝えています。

4. JavaScriptによる値のリアルタイム表示

oninput イベントを利用することで、ユーザーがスライダーをドラッグしている最中でも、現在の値が即座に画面へ反映されます。

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSとJavaScriptでカスタム範囲スライダーを作成する方法【コード例付き】

このように、CSSの疑似要素とJavaScriptのイベント処理を組み合わせるだけで、デザイン性の高いカスタムスライダーを簡単に構築できます。音量調整や価格フィルターなど、さまざまなUIシーンで応用してみてください。

  1. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini