In this post, we will demonstrate you how to add the jqxSlider widget to your web page and also how to get and set the Slider’s value.
– Create a new html page and add links to the JavaScript files and CSS dependencies to your project. The jqxSlider widget requires the following files:
<head><link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/><script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script><script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script><script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script><script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script></head>
– Add a DIV tag within the body of the html document.
<div id='slider'></div>
– Initialize the Slider by calling the jqxSlider constructor. In the initialization, we specify the slider’s min and max values and also the current value, the sliding step and the frequency of the tick marks.
$('#slider').jqxSlider({min: 0, max: 255, ticksFrequency: 25.5, value: 0, step: 25.5});
To set the Slider’s value, you need to do the following:
$('#slider').jqxSlider({ value: 30 });
To get the value, you can do this:
var value = $('#slider').jqxSlider('value');
