JQuery Circular Range Slider Plugin – roundSlider

Round slider is a jQuery plugin that allows the user to select a value or range of values by dragging the slider handle. Not only a round slider, it supports the quarter, half and pie circle shapes also. The primary features of Circular Range Slider Plugin:

  • 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

Live Demo

Slider Types
Circle Shapes

How to Use

Add the css below to your html page

<link href="../dist/roundslider.min.css" rel="stylesheet" />

Create a container where you want to render Circular Range Slider

    <div class="types">
        <h3>Slider Types</h3>
        <div class="container">
            <div class="control">
                <div id="type"></div>
            <div class="options">
                <select id="Select1" onchange="sliderTypeChanged(this)" style="float: left;">

    <div class="types">
        <h3>Circle Shapes</h3>
        <div class="container">
            <div class="control">
                <div id="shape"></div>
            <div class="options">
                <select id="type1" onchange="sliderShapeChanged(this)" style="float: left;">

Load jQuery library together with the Circular Range Slider library into your code

<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="../dist/roundslider.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
            value: 45,
            value: 60,
            sliderType: "min-range"

    function sliderTypeChanged(e) {
            sliderType: e.value

    function sliderShapeChanged(e) {
        var options = {
            circleShape: e.value
        if (e.value == "pie") options["startAngle"] = 0;
        else if (e.value == "custom-quarter" || e.value == "custom-half") options["startAngle"] = 45;

Source Code


For more Advanced Usages, please check the demo page or visit the official website.