iOS Safariのスライダー(input type="range"のやつ)のつまみをでかくする


inputタグのrangeタイプを用いると出て来るスライダー、
iPhoneやiPadでも表示はされるが小さすぎてつまみずらい。

実は、以下のようにCSSを用いて::-webkit-slider-thumbでつまみを指定して
widthとheightを両方とも指定することで大きくできる。

input[type="range"]::-webkit-slider-thumb {
    width: 35px;
    height: 35px;
}

スライダーのCSSを一から作り直すタイプの解決策はよく出てくるが、
「デザインとか仮だしこのままでいい。つまみの大きさだけ、すぐにでっかく!」
という人向けの最速の解決法は意外とググっても出てこないのでここに書き残しておいた。