Circular Slider

JavaScript

円形スライダーで進捗度などを分かりやすく表示できるjQueryプラグイン「Circular Slider」

Circular SliderというjQueryプラグインを使えば、円形スライダーで進捗度などを分かりやすく表示させることができます。値をドラッグして直接動かすことも可能です。円の中心には数値も表示されるので、とても見やすいですね。

[ads_center]

Circular Sliderの使い方

実際のデモは以下から確認することができます。

Circular Slider

Circular Slider

使い方は、まずhead内にjQuery本体とプラグインファイルを読み込みます。

<link rel="stylesheet" href="circular-slider.min.css" />
<script src="jquery.js"></script>
<script src="circular-slider.min.js"></script>

Circular Sliderを挿入させるタグを記述しておきます。

<div id="slider"></div>

あとはセッティングするだけです。

var slider = $('#slider').CircularSlider();

実際に値を指定する場合は、以下のように記述します。

var circularSlider = $('#slider').CircularSlider({
    min : 0,
    max: 100,
    value : 50
});

minとmaxで範囲を指定して、valueに値をセットします。

  • circle
  • half circle
  • half circle left
  • half circle right
  • half circle bottom

Circular Slider

関連記事

  1. FrameScrub
  2. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  3. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  4. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

  5. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  6. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP