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>
    <div class="types">
        <h3>Slider Types</h3>
        <div class="container">
            <div class="control">
                <div id="type"></div>
            </div>
            <div class="options">
                <select id="Select1" onchange="sliderTypeChanged(this)" style="float: left;">
                    <option>default</option>
                    <option>min-range</option>
                    <option>range</option>
                </select>
            </div>
        </div>
    </div>

    <div class="types">
        <h3>Circle Shapes</h3>
        <div class="container">
            <div class="control">
                <div id="shape"></div>
            </div>
            <div class="options">
                <select id="type1" onchange="sliderShapeChanged(this)" style="float: left;">
                    <option>full</option>
                    <option>quarter-top-left</option>
                    <option>quarter-top-right</option>
                    <option>quarter-bottom-right</option>
                    <option>quarter-bottom-left</option>
                    <option>half-top</option>
                    <option>half-bottom</option>
                    <option>half-left</option>
                    <option>half-right</option>
                    <option>pie</option>
                    <option>custom-half</option>
                    <option>custom-quarter</option>
                </select>
            </div>
        </div>
    </div>
</div>

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 () {
        $("#type").roundSlider({
            value: 45,
        });
        $("#shape").roundSlider({
            value: 60,
            sliderType: "min-range"
        });
    });

    function sliderTypeChanged(e) {
        $("#type").roundSlider({
            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;
        $("#shape").roundSlider(options);
    }
</script>

Source Code

Download

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