しょぼしょぼプログラマ雑記

自分のための備忘録。 開発記録など掲載してます。 質問・ご意見・ご感想等はTwitter ( https://twitter.com/yun_hokuto ) までお気軽にどうぞ。

HTML5のinput[type=range]について考える(追記:2015/03/31)

HTML5で実装されている「input type="range"」でのスライダー入力ですが、

指定範囲のみの入力を許容する便利なものですね。

ただ、CSSを当てづらい、データリストの設定がめんどくさいなど問題があります。

そこで、とりあえずCSSでカスタムしてみましたので、それを掲載してみたいと思います。

※今回はjQueryを使用しています。

まずはHTML

<form>
    <label>Min&nbsp;<input type="range" name="Sugar" min="1" max="5" step="1" list="datalist" label="Sugar" value="3">&nbsp;Max</label>
    <datalist id="datalist">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
    </datalist>
</form>

このままでは普通のものになってしまうので、CSSを当てていきます

input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 10px;        /* CSS3 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome */
    -moz-border-radius: 10px;   /* Firefox */
    background: #92cadb; /* Old browsers */
    background: -moz-linear-gradient(top,  #92cadb 0%, #6da2b4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92cadb), color-stop(100%,#6da2b4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #92cadb 0%,#6da2b4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #92cadb 0%,#6da2b4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #92cadb 0%,#6da2b4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #92cadb 0%,#6da2b4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92cadb', endColorstr='#6da2b4',GradientType=0 ); /* IE6-9 */
    width: 100px;
    height: 6px;
}

input[type=range]::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 10px;        /* CSS3 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome */
    -moz-border-radius: 10px;   /* Firefox */
    background: #92cadb; /* Old browsers */
    background: -moz-linear-gradient(top,  #92cadb 0%, #6da2b4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92cadb), color-stop(100%,#6da2b4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #92cadb 0%,#6da2b4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #92cadb 0%,#6da2b4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #92cadb 0%,#6da2b4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #92cadb 0%,#6da2b4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92cadb', endColorstr='#6da2b4',GradientType=0 ); /* IE6-9 */
    width: 100px;
    height: 6px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-image: url('../img/slider-button.png');
    border-radius: 18px;        /* CSS3 */
    -webkit-border-radius: 18px;    /* Safari,Google Chrome */
    -moz-border-radius: 18px;   /* Firefox */
    width: 18px;
    height: 18px;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    background-image: url('../img/slider-button.png');
    border-radius: 18px;        /* CSS3 */
    -webkit-border-radius: 18px;    /* Safari,Google Chrome */
    -moz-border-radius: 18px;   /* Firefox */
    width: 18px;
    height: 18px;
}

こんな感じでCSSを設定します

やっていることは至極単純で、「バーの色を変更、スライダーを画像にする」というものです

そして、ここがポイントですが

WebKit系とMoz系の設定を同時に出来ない」

というものです

ご覧いただくとわかるかと思いますが、書いてある内容はコピペです

ただ、海外のフォーラムにもありましたが、同時の設定は現時点ではできないようです

なので、同じ内容なのですが2回記述しているというわけです

続いてjQueryでの値の取得ですが

「change」イベントは「スライダーを動かし終わった時の値」を取得します

スライダーを動かしている最中でも値の変化を取得したい場合は「input」イベントになりますのでご注意を。

サンプルソースは下記の通りです

// Changeの場合
$('input[type=range]').bind('change', function() {
  console.log($(this).val());
});

// Inputの場合
$('input[type=range]').bind('input', function() {
  console.log($(this).val());
});

これで少しは使いやすくなったかな?


*2015/03/31 追記

このイベントは各ブラウザにおいて挙動が異なります

特にIE10ではinputイベントが発生しません

また、inputイベントで背景画像を切り替える動作においては、ChromeSafariWebkit系のみ動作します

(動かすときにも画像が明滅し、チカチカします)

やはりHTML5における動作の挙動には、現時点ではまだまだ不安定っぽいです・・・