jQuery Circular Range Slider Plugin - roundSlider

roundSlider is a jQuery plugin for converting a DIV element into a circular range slider which helps you slide range of values with mouse drag. 

Built-in shapes:

• full circle
• quarter-top-left
• quarter-top-right
• quarter-bottom-right
• quarter-bottom-left
• half-top
• half-bottom
• half-left
• half-right
• pie
• custom-half
• custom-quarter

See also:

Basic usage:

1. Include the jQuery roundSlider plugin's stylesheet and JS files in your webpage which has jQuery library installed.

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

2. Create a DIV element for the circular range slider.

<div id="demo"></div>

3. Call the plugin on the DIV element to generate a default range slider with full circle shape.

$("#demo").roundSlider({
  // options here
});

4. The plugin comes with a plenty of options to help you customize the range slider. Here is a list of full options with default values.

// min / max value
min: 0,
max: 100,
// custom step
step: 1,
// initial value
value: null,
// customize the slider
radius: 85,
width: 18,
handleSize: "+0",
startAngle: 0,
endAngle: "+360",
// enable animation
animation: true,
// enable tooltip
showTooltip: true,
editableTooltip: true,
// read-only mode
readOnly: false,
// disabled mode
disabled: false,
// allow for keyboard interaction
keyboardAction: true,
// enable mousel scroll action
mouseScrollAction: false,
// achieve the rounded edges
lineCap: "square",
// default, min-range or range
sliderType: "default",
// full, quarter-top-left, quarter-top-right, quarter-bottom-right, 
// quarter-bottom-left, half-top, half-bottom, half-left, half-right, 
// pie, custom-half, custom-quarter
circleShape: "full",
// handle shapes
handleShape: "round",
// events
beforeCreate: null,
create: null,
start: null,
drag: null,
change: null,
stop: null,
tooltipFormat: null

5. Public methods.

• getValue: get the current value.
• setValue: set to a new value
• disable: disable the plugin
• enable: enable the plugin
• destroy: destroy the plugin

Change logs:

2018-04-22

• v1.3.2

2016-02-29

2016-02-09

• _handleDragDistance based code changes updated.

2016-01-31

• Arguments list updated for all events.

2016-01-24

• v1.2: Prevent the click on the unused angle

2016-01-04

• Modified the property name from "roundedCorner" to "lineCap", also added some source corrections.

2015-11-28

• Change event related issue solved.

2015-11-26

• JS update

2015-10-26

2015-10-21

• roundedCorner related issue solved.

2015-10-20

• added roundedCorner property to achieve the rounded edges.

2015-10-12

• Fixed an issue in setValue function

2015-08-02

• Updated the source

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