先日のエントリでjQuery UIを使って”アクティブ領域の背景色に色がつくスライダー”を作ったのですが、iPhoneでバーが動かないという事態が。。。
jQuery mobileを使う手もあるのですが、他のスタイルに影響しまくるので、CSSだけで解決できないか試行錯誤の結果こんな感じでできました。
さすがにロジックレスにはできなかったので、jQueryは使用してます。
アウトプット
input type=“range” のつまみ部分にz-indexを指定し、位置を手前にずらし、元のゲージ領域は非表示にしています。
divをposition: absolute;で上にかぶせつつ、つまみがちょうど真ん中にくるように位置を調整してます。
サンプルコード
https://gist.github.com/akifumi-kamata/33531fe6eb5f4ffd1841
アクティブ領域のdivの位置指定の方法は、たぶんもっといい方法があるんだと思います。
