📂プログラミング

CSSでダブルスライダーを実装する例

ショーケース

上のスライダーの二つの点をドラッグするとリアルタイムで二つの入力欄の値が更新され、逆に入力欄に値を入力するとスライダーの位置が更新される。この機能はユーザーに直感的なインターフェースを提供し、範囲選択などの操作に有用だ。

ダブルスライダーという概念は、HTMLの基本的な<input type="range">要素を二つ重ねて使う方式で実装され、根本的に値が更新される機能はJavaScriptのイベントリスナーを通じて行われる。言い換えれば、たとえ何の機能もなくても、ダブルスライダー自体はJavaScriptを必要としない。これ以外にもレンジ間を塗りつぶしたり、二つの値が逆転しないようにする実装などがありうるが、このショーケースで示す機能を含め、それらはすべて付随的な要素に過ぎない。

コード

CSS

<style>
    input[type="range"] {
        position: absolute;
        width: 100%;
        pointer-events: auto;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        position: relative;
        cursor: grab;
        z-index: 1;
    }

    .slider-track {
        position: relative;
    }
    input[type="range"]::-webkit-slider-runnable-track {
        background: lightgray;
    }
</style>

• input[type="range"] {position: absolute;}: 複数のスライダーを同じ場所に重ねるために必須のスタイルだ。絶対位置を指定することで二つのスライダーが同じ位置に重なる。
• input[type="range"]::-webkit-slider-thumb: スライダーのハンドル部分をスタイリングするために使う。
• background: lightgray;: -webkit-slider-runnable-trackが無いとスライダーは重なって表示されるがそれぞれ独立して動くため認識しづらく、実質的にダブルスライダーとは呼べない。背景色を指定することでハンドルのみ表示され、実際のレーンは見えなくする。

HTML

<input type="text" id="v1-text" value="20">
<input type="text" id="v2-text" value="80">
<div class="slider-track" id="slider">
    <input type="range" id="v1-slider" min="0" max="100" value="20" step="1">
    <input type="range" id="v2-slider" min="0" max="100" value="80" step="1">
</div>
<br><br>

• <input type="text">: 二つのスライダーの値を表示しつつ、ユーザーが直接入力できる入力欄を提供する。
• <div class="slider-track" id="slider">: 複数のスライダーを包むコンテナだ。
• <input type="range">: 実際のスライダーを表すHTML要素だ。

javascript

<script>
    const v1Slider = document.getElementById('v1-slider');
    const v2Slider = document.getElementById('v2-slider');
    const v1Text = document.getElementById('v1-text');
    const v2Text = document.getElementById('v2-text');
    
    function updateRange() {
        v1Text.value = parseInt(v1Slider.value);
        v2Text.value = parseInt(v2Slider.value);
    }

    function updateSlider() {
        v1Slider.value = parseInt(v1Text.value);
        v2Slider.value = parseInt(v2Text.value);
    }

    v1Slider.addEventListener('input', updateRange);
    v2Slider.addEventListener('input', updateRange);
    v1Text.addEventListener('input', updateSlider);
    v2Text.addEventListener('input', updateSlider);
    
    updateRange();
</script>

• update*(): スライダーと入力欄の値を同期する関数だ。スライダーの値が変化したら入力欄に反映し、入力欄の値が変化したらスライダーの位置を更新する。
• addEventListener: どのイベントが発生するか分からないので、レンジの更新とスライダーの更新をあらゆる場合に対応させた。