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. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  2. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  3. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  4. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  5. Tooltipster

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  6. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP