roundSlider: A free jQuery plugin

Shares

Round slider (AKA Circular slider and Radial slider) is a jQuery plugin that allows the user to select a value or range of values. Not just a round slider, this plugin also supports the quarter, half and pie circle shapes also.

Features

  • No need of images, pure JS and CSS code only
  • Great look and feel
  • Very easy to customize through CSS
  • Supports all CSS3 animations
  • Range slider support
  • Linear step increment
  • Touch support
  • Keyboard support
  • Mouse scroll support
  • Open source (under MIT license)

Demo:

Default


Half Top


Custom CSS


Usage:

JS:

$("#slider").roundSlider({
    radius: 85,
    sliderType: "min-range",
    value: 40
});

JS: WordPress No-Conflict

jQuery("#slider").roundSlider({
    radius: 85,
    sliderType: "min-range",
    value: 40
});

HTML:

<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />                             
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
<div id="slider"></div>

Dependency: Requires Jquery

Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest