Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
January 24, 2022 17:51
November 1, 2019 18:56
January 24, 2022 17:50
June 2, 2021 21:04
June 3, 2021 12:33
April 22, 2020 21:28
June 2, 2021 21:17
June 20, 2021 17:36
October 5, 2021 16:06

roundSlider - A free jQuery plugin

npm GitHub

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.

roundSlider - full slider, pie slider, half slider and quarter slider types

You can check the demos of various circle shapes here.

Different Theming and Appearances ?

By customizing the CSS styles we can make different appearances.

roundSlider - different theming and appearances

You can check the detailed demos here.

Browser Support

IE 9+, Chrome, Firefox, Safari, Opera (including Mobile devices).


The roundSlider has several properties and events to interact with the control programmatically.

To know more about the Options, please check the documentation.

	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

roundSlider - test environment


roundSlider is licensed under the terms of the MIT license.