[html+css]input:rangeで頭と尻を選択できるようにする

「ここからここまで」を指定する。

できないということ
こんな感じ

できないということ

input:rangeのvalueは1個だけだから、無理。

なので２つ重ねてそれっぽく見せようということになる。

こんな感じ

最低限のところだけ。

<div class="input">
    <input type="range" name="" min="0" max="100" value="0">
    <input type="range" name="" min="0" max="100" value="100">
</div>

.wrap{
    width: 100%;
    pointer-events: none;
    position: relative;
    input[type="range"]{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        appearance: none;
        -webkit-appearance: none;
        &::-webkit-slider-thumb{
            pointer-events: auto;
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            z-index: 1;
        }
    }
}

解説的なもの

inputを重ねるしかない。

重ねたときにバー部分が生きてると、下にある方が選択できないので「pointer-events」を使ってthumb部分だけを活かしてる。

で、バー部分が消えちゃってるので親要素なり疑似要素なりを活用して装飾しなきゃいけないんだけど、ここはCSSだけでカバーできないのでjsを噛ませる必要がある。

それぞれの数値を拾って、上限から％を算出して、thumbの間の背景に色を付けるみたいな。

要するに

ここを見ましょう。

2つのthumbを持つレンジスライダーを作る - Qiita

概要<input>要素のrange型を利用して「◯◯〜◯◯」のような範囲の選択ができるレンジスライダーを作った。ポイントは、range型をz軸に2つ重ねる手前のスライダーで奥になるスライダー…

気をつけないといけない点

inputを被せてるだけだからクロスしちゃう可能性が出てくる。

minとmaxが入れ替わる可能性がある。

なので、それもjs経由でいい感じに調整するようにしてください。