jQuery Circular Range Slider Plugin - roundSlider

jQuery Circular Range Slider Plugin - roundSlider
File Size: 110 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

  • v1.3

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

  • v1.1

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.