
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.
- Publication date: 22.04.2018
- Source