- ×
roundSlider - A free jQuery plugin
Filed under user interfaceShow AllroundSlider - A free jQuery plugin
What's this ?
Round slider (also can call as Circular slider, Radial slider) is a jQuery plugin that allows the user to select a value or range of values.
Not only a round slider, it supports the quarter, half and pie circle shapes also.
You can check the demos of various circle shapes here.
Different Theming and Appearances ?
By customizing the CSS styles we can make different appearances.
You can check the detailed demos here.
Browser Support
IE 9+, Chrome, Firefox, Safari, Opera (including Mobile devices).
Options
The roundSlider has several properties and events to interact with the control programmatically.
To know more about the Options, please check the documentation.
$("#slider").roundSlider({ min: 0, max: 100, step: 1, value: null, radius: 85, width: 16, handleSize: "+0", startAngle: 0, endAngle: "+360", animation: true, showTooltip: true, editableTooltip: true, readOnly: false, disabled: false, keyboardAction: true, mouseScrollAction: false, sliderType: "default", circleShape: "full", handleShape: "round", lineCap: "butt", // the 'startValue' property decides at which point the slider should start. // otherwise, by default the slider starts with min value. this is mainly used // for min-range slider, where you can customize the min-range start position. startValue: null, // SVG related properties svgMode: false, borderWidth: 1, borderColor: null, pathColor: null, rangeColor: null, tooltipColor: null, // events beforeCreate: null, create: null, start: null, // 'beforeValueChange' will be triggered before 'valueChange', and it can be cancellable beforeValueChange: null, drag: null, change: null, // 'update' event is the combination of 'drag' and 'change' update: null, // 'valueChange' event is similar to 'update' event, in addition it will trigger // even the value was changed through programmatically also. valueChange: null, stop: null, tooltipFormat: null });
Some quick links
Test environment
Licence
roundSlider is licensed under the terms of the MIT license.