The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Round Slider

    roundSlider - A free jQuery plugin
    Filed under 

    • 🔾23%Overall
    • 215
    • 21.1 days
    • 🕩70
    • 👥6

    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,
            // events
            beforeCreate: null,
            create: null,
            start: null,
            drag: null,
            change: null,
            stop: null,
            tooltipFormat: null

    Test environment

    roundSlider - test environment


    roundSlider is licensed under the terms of the MIT license.

    Show All