JavaScripting

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


  • ×

    Round Slider

    roundSlider - A free jQuery plugin
    Filed under 

    • 🔾26%Overall
    • 227
    • 20.2 days
    • 🕩75
    • 👥7

    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).

    Options

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

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

    $("#slider").roundSlider({
        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
    });
    

    Test environment

    roundSlider - test environment

    Licence

    roundSlider is licensed under the terms of the MIT license.

    Show All