HTML5になってWebフォームのコントロールは増えていますが、それでもなお標準のままではあまりにチープです。そこでスタイルシートなどを駆使してデザインを変更するのはよくあることです。今回注目するのはレンジコントロールです。 一定の範囲内にあるデータを指定するのに便利ですが、表示があまりよくありません。そこで使ってみたいのがjquery-rsSliderLensです。

jquery-rsSliderLensの使い方

変更後のデザインです。まるでオーディオ機器のようなデザインです。

ステップを指定すれば、そのステップ毎の入力しかできません。

マイナスの値もサポートされています。

ツマミ部分のデザインは変更できます。

さらにデザインを変えた版。オーディオ感がさらに出ました。

画像と合わせた使い方。選択されている部分が拡大表示されています。

縦型もサポートされています。

スライドさせると画像を入れ替えたりする仕掛けもできます。

二つのツマミを同時に表示することもできます。

jquery-rsSliderLensを使えば単なるレンジ入力が格好良く変わります。インパクトが強いものになるので、他のデザインとのバランスも考える必要はありそうです。反面、ぴったりマッチするケースはあるでしょう。 jquery-rsSliderLensはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

jquery-rsSliderLens plugin extended demo ruisoftware/jquery-rsSliderLens: UI slider control that magnifies the current value