jQuery Circular Range Slider Plugin - roundSlider

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.

  // 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:


  • v1.3.2



  • _handleDragDistance based code changes updated.


  • Arguments list updated for all events.


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


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


  • Change event related issue solved.


  • JS update



  • roundedCorner related issue solved.


  • added roundedCorner property to achieve the rounded edges.


  • Fixed an issue in setValue function


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

  • Publication date: 22.04.2018
  • Source