jQuery Plugin that Allows the User to Specify a Value or Range of Values | roundSlider

roundSlider is a jQuery plugin to turn a DIV element into a circular range slider that helps you scroll the range of values ​​with a mouse drag.

round slider jquery, how to create round slider in html, half circle slider jquery, jquery range slider with steps, round slider css, circular slider javascript

why is that ?

While surfing the web, I’ve found that many people need a perfect scroll bar with a circular path. But most of them weren’t satisfied with the available solutions, so roundSlider will solve that.


  • No need for images, just JS and CSS code
  • Great look and feel
  • Very easy to customize through CSS
  • Supports all CSS3 animations
  • Slider support
  • Linear step increase
  • Touch support
  • keyboard support
  • Mouse scrolling support
  • Open source (under the MIT license)

Browser support

Since roundSlider builds based on some CSS3 styles like border radius, transform, etc., it supports all major browsers that support these styles, including mobile devices as well.

IE 9+ChromeFirefoxSafariOpera

In IE9, animations are not supported, as they do not support CSS3 transition effects.

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

How to make use of it:

1. Include the jQuery roundSlider plugin’s stylesheet and JS information in your webpage which has the jQuery library.

<script src="jquery.min.js"></script>
<link href="src/roundSlider.css" rel="stylesheet" />
<script src="src/roundSlider.js"></script>

2. Create a DIV component for the circular range slider.

<div id="demo"></div>

3. Call the plugin on the DIV component to generate a default range slider with full circle shape.

  // options here

4. The plugin comes with loads of choices that can assist you to customise the range slider.

// min / max value
min: 0,
max: 100,

// custom step
step: 1,

// initial value
value: null,

// customize the slider
radius: 85,
width: 18,
// the below props are relative to "width" when you provide the value starts with "+" or "-"
// otherwise if you provide any number then it will take the exact value
pathWidth: "+0",
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,

// square, or round
lineCap: "butt",

// 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",

// round, dot, or square
handleShape: "round",

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

allowInvertedRange: false,
handleRotation: false,
snapToStep: true,

// SVG related properties
svgMode: true,
borderWidth: 1,
borderVisibility: "both",
borderColor: "#AAA",
pathColor: "#FFF",
rangeColor: "#54BBE0",
handleColor: null,
tooltipColor: null,

// events
beforeCreate: null,
create: null,
start: null,
beforeValueChange: null,
drag: null,
change: null,
update: null,
valueChange: null,
stop: null,
tooltipFormat: null

jQuery Circular Range Slider Plugin, roundSlider Github, circle range slider

See Demo And Download

Official Website(soundar24): Click Here

This superior jQuery/javascript plugin is developed by soundar24. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…