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.
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.
From Properties, consider the value property. To get or set the value for the property:
obj holds the current control's instance.
In the following ways we can bind the events to the control.
like anonymous function
jQuery like binding
var obj = $("#control").data("roundSlider"); obj.disable();
Passing arguments to the public method:
$("#control").roundSlider("setValue", 40, 1); (or) obj.setValue(40, 1);
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.
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="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
<script src="scripts/jquery-1.11.3.min.js"></script> <link href="dist/roundslider.min.css" rel="stylesheet" /> <script src="dist/roundslider.min.js"></script>
Note : If you want to use the local files then you can download the source and then use that files.
Step 2 : Add the HTML markup
Include the below HTML element in your application, at where you want to render the control.
Step 3 : Call the roundSlider
From the script section, you can call the roundSlider with corresponding DOM object.