jquery-rsSliderLens - レンジ入力を格好良く変身させる
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