How satisfied are you? Slider

JavaScript

スライダーの位置でアイコンが変化する「How satisfied are you? Slider」

How satisfied are you? Sliderは、スライダーを左右に動かすことで、その位置によってアイコンが変化するスライドバーを実装できるチュートリアルです。シンプルなスライドバーで操作もしやすく、応用次第でいろんなシーンに活用できそうですね。

How satisfied are you? Slider

How satisfied are you? Slider

デモでは「How satisfied are you?」と表示されたスライドバーが設置されています。バーを左右にスライドさせてみると分かると思いますが、顔のアイコンが表示され、真ん中を基軸に右へ移動させると笑っているアイコンになり、左へ移動させると不満なアイコンに変化します。

スライドの位置に応じてアイコンが切り替わるのでとてもおもしろい機能ですね。何かのレビュー評価など、用途によってはいろいろと応用できるのではないでしょうか?

というわけで、スライドバーの位置によってアイコンが変化する「How satisfied are you? Slider」の紹介でした。

no-imageシンプルなイメージスライダーとカルーセルを実装できる「SkySlider」前のページ

高いカスタマイズ性を備えたモダンダイアログライブラリ「Simply Modal Box」次のページSimply Modal Box

関連記事

  1. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  2. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  3. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  4. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  5. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  6. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP