Introduction

Round slider is a jQuery plugin that allows the user to select a value or range of values by dragging the slider handle.

If you are here means that you are going to use this or you want to know about this. So this document will explain the things what you need to know.

0 Comments

Index

Options

The roundSlider options are classified as properties and events, by using that we can interact with the control programmatically. In addition some public methods also available to access the control.

How to use Options ?

In below, it shows the possible ways to use the Options. After the control initialization, by using any one of the way we can access the control dynamically.

Properties

From Properties, consider the value property. To get or set the value for the property:

Setter

$("#control").roundSlider("option", "value", 50);

        (or)

$("#control").roundSlider("option", { "value", 50 });

var obj = $("#control").data("roundSlider");

    obj.option("value", 50);

Getter

$("#control").roundSlider("option", "value");
var obj = $("#control").data("roundSlider");

    obj.option("value");

where obj holds the current control's instance.

Events

In the following ways we can bind the events to the control.

like anonymous function

$("#control").roundSlider({
    change: function (e) {
        console.log(e.value);
    }
});

through handler

$("#control").roundSlider({
    change: "onValueChange"
});

function onValueChange (e) {
    console.log(e.value);
}

jQuery like binding

$("#control").roundSlider();

$("#control").on("change", function (e) {
    console.log(e.value);
}

Public Methods

$("#control").roundSlider("disable");
var obj = $("#control").data("roundSlider");

    obj.disable();

Passing arguments to the public method:

$("#control").roundSlider("setValue", 40, 1);
        
        (or)

obj.setValue(40, 1);

Class Names

The roundSlider has the following public classes, which user can overwrite these classes to apply their custom styles or themes.

  • .rs-path-color : This class applies the background color for the slider path.
  • .rs-range-color : This class applies the background color for the slider range.
  • .rs-bg-color : This class applies the background color for the slider control.
  • .rs-border : This class applies the border color for the slider control.
    • .rs-border.rs-inner : This class applies the styles for inner border alone.
    • .rs-border.rs-outer : This class applies the styles for outer border alone.
  • .rs-handle : This class added for the slider handles. We can set the handle styles here.
    • .rs-first .rs-handle : Mentions the first handle of the slider.
    • .rs-second .rs-handle : Mentions the second handle of the slider. This is available at the range slider only.
    • .rs-handle.rs-focus : When the slider handle was focused, at that time the focus class added for the corresponding handle.
  • .rs-animation .rs-transition : This class applies the CSS3 animation related styles.

Note : If you have faced any problem while applying the colors, then you can use the Playground to customize the colors.

How to Install ?

Just follow the below three steps to include the roundSlider into your application.

Step 1 : Include the dependency files

Since jQuery is the basic dependency file, so include that. And, for roundSlider include the control's CSS and Script file.

<script src=""></script>
                                    
<link href="" rel="stylesheet" />
                                    
<script src=""></script>

Step 2 : Add the HTML markup

Include the below HTML element in your application, at where you want to render the control.

<div id="slider"></div>

Step 3 : Call the roundSlider

From the script section, you can call the roundSlider with corresponding DOM object.

$("#slider").roundSlider();