LoginSignup
9
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-11-25

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

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

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

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

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
5