jQuery Plugin For Multi-purpose Circular Slider Controls

Circular Slider is a jQuery plugin used to create customizable circular slider controls for multiple purposes such as range slider, image carousel slider, etc.

See also:

• Minimal Circular Range Slider with jQuery and jQuery UI
• Cool jQuery Plugin For Circular Carousel Slider - Tiny Circleslider

How to use it:

1. Include the jQuery circular slider plugin after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/circular-slider.js"></script>

2. Create a DIV container for the circular slider control.

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

3. Call the plugin on the DIV container and pass the options as follows.

$('#slider').CircularSlider({ 
  radius: 75, // default radius
  innerCircleRatio: '0.5',
  handleDist : 100,
  min : 0, // min value
  max: 359, // max value
  clockwise: true, // false = counterclockwise
  value : 10, // default vale
  labelPrefix: "", // label text
  labelSuffix: "", // label text
  shape: "Circle", // circle, Half Circle, Half Circle Right, Half Circle Left, KPH
  touch: true, // enable touch events
  animate: true, // linear animation support
  animateDuration: 360, // Animation duration in milliseconds
  selectable: false, 
  slide : function(value) {}, // event to be fired on slide
  onSlideEnd: function(ui, value) {},
  formLabel: undefined // for image carousel
});	

4. Add the following CSS snippets into your document and override the styles to create you own slider controls.

.jcs {
  position: relative;
  border-style: solid;
  border-radius: 100%;
  border-color: hotpink;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 5px;
  cursor: pointer;
}

.jcs-value {
  position: absolute;
  border-style: none;
  border-radius: 100%;
  border: 2px solid rgb(236, 248, 212);
  text-align : center;
  pointer-events: none;
  line-height: 4em;
  color: white;
  background-color: yellowgreen;
  outline: none;
}

.jcs-indicator {
  position: absolute;
  border-radius: 100%;
  background-color: deeppink;
  border: 1px solid rgb(177, 177, 177);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  pointer-events : none;
}

.jcs-panel {
  position: relative;
  display: inline-block;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
}

.jcs-value img {
  border-radius: 100%;
  background: transparent;
  width: inherit;
  height: inherit;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

About Author:

Author: Prince John Wesley

Website: http://www.toolitup.com

Change logs:

2015-05-28

• Add mouseleave event

2015-05-09

• onSlideEnd callback

2015-04-23

• typo settings

2015-04-11

• Add configurable animatation properties

2014-12-28

• Add set range dynamically

2014-11-04

• Update and fixed

2014-10-21

• added animate and animateDuration options.

---

This awesome jQuery plugin is developed by princejwesley. For more Advanced Usages, please check the demo page or visit the official website.