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. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

  2. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  3. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  4. simplePagination.js
  5. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  6. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP