In this quick start, you'll learn how to add the Slider widget to an HTML project using HTML markup and jQuery script.
- To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
| Paste in Notepad. |
Copy Code
|
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
|
- Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20133.19.js" type="text/javascript"></script>
<!--Knockout JS Library-->
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script>
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20133.19.js" type="text/javascript"></script> |
- Add the following markup within the <body> tags to create the widget. The <div> element creates the widget, and we call its id attribute in jQuery to initialize it.
Drop down and copy markup to paste inside the body tags
| Markup |
Copy Code
|
<div id="slider"></div> |
- Within the <head> tags, below the references, add the following script to initialize the widget and set its range, step, and values.
Drop down and copy script to paste inside the head tags
| Script |
Copy Code
|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#slider").wijslider({
//because we are setting range to true,
//two thumb buttons appear in the track
//so that the user can select a range
range: true,
min: 0,
max: 100,
step: 2,
//Because the range option is set to true, we use
//the values option to set the beginning
//and ending values for the default positions
//of the thumb buttons. If range were set to false, we
//would use the value option for the single thumb.
values: [25, 50]
});
});
</script> |
- Within the <head> tags, above the script to initialize the widget, set the size of the widget using CSS.
Drop down and copy markup to paste inside the head tags
| Style |
Copy Code
|
<style type="text/css">
#slider
{
width: 300px;
}
</style> |
- Save your HTML file and open it in a browser. The widget appears like the following live widget. Since we set the range option to true, there are two thumb buttons that you can drag along the track to select a range, in addition to the increment and decrement buttons to either side.
See Also
Reference
Concepts
Show All
Hide All