◆ input range を 0 か 1 の選択にすればトグルスイッチ UI がかんたんに作れる

前もどこかで書いた気がするけど見当たらなくてまた作ったので

丸いのが左右に動いたりする ON/OFF のスイッチの UI はそこそこ見かけますよね
div などの組み合わせで作られていたり トグルスイッチなので checkbox を使って :checked で見た目変えてたりが多いです

ただ 個人的には 見た目的に input range でいいんじゃないの?と思います
0 ~ 100 みたいなのはいらなくて 0 か 1 の 2 択状態にすれば左端か右端の 2 つの状態です
幅を小さめにすればそれだけでトグルスイッチの完成です

input range は CSS で見た目いじれるようだったのでカスタマイズしてみました

<!doctype html>
<style>
input[type=range] {
-webkit-appearance: none;
width: 60px;
margin: 0px 0;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 24px;
background: #ddd;
border: 0;
box-shadow: 0 0 1px 1px #aaa;
border-radius: 4px;
cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
width: 32px;
height: 24px;
margin-top: 0px;
border: 1px solid #0003;
border-radius: 4px;
background: #f5f5f5;
cursor: pointer;
-webkit-appearance: none;
}

input[type=range].on::-webkit-slider-runnable-track {
background: rgb(45, 252, 73);
box-shadow: 0 0 1px 1px rgb(0, 209, 0);
}
</style>
<input type="range" class="onoff" min="0" max="1" value="0">

<script>
document.body.querySelector("input").oninput = eve => {
eve.target.classList.toggle("on", !!~~eve.target.value)
}
</script>

input-range-toggle

input range なので押したほうがアクティブになったり ドラッグした状態で移動できたりと使い勝手がすごく良いです
さらにその便利さを自分で JavaScript を使って色々やらなくても使えるというのが大きいです

上の DEMO では色を変えるために input イベントでクラスの切り替えだけやってます
イベントでも ドラッグが完了したときに初めて更新処理するなら change が使えますし ドラッグ中でもリアルタイム反映させたいなら input が使えます
デフォルトコントロール強い

今回は 2 値のトグルスイッチですが radio で 4 択とかでも input range は使えると思います
1 ~ 5 の段階で評価を入力するとかだと順番に意味もあるのでベストな組み合わせだと思います
input range のステップの場所に合わせて 1 や 2 の点数書くのに場所調整が面倒かもですけど