Documentation

Getting Started

jqxRangeSelector is a widget which can easily be used to select a numeric or date range. The API of jqxRangeSelector allows for a variety of user settings to be applied such as setting the range in numbers, days, weeks, months, years, etc

The first step is to create html page and add links to the javascript files and css dependencies to your project. jqxRangeSelector uses jQuery for basic JavaScript tasks such as element selection and event handling. You need to include the jQuery JavaScript file, the jQWidgets core framework file - jqxcore.js, the jQWidgets data binding file - jqxdata.js, the main jqxRangeSelector plug-in file - jqxrangeselector.js file, and the base jQWidgets stylesheet - jqx.base.css:


<link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxrangeselector.js"></script>

The next step is to define an element which will serve as a container for the range selector. DIV elements are conveninent because you can easily position them and specify a size of your choise. Give the DIV element an ID like 'jqxRangeSelector' or something that you like. Inside the first DIV, nest another DIV element, which will hold the contents of the range selector. The contents can be a background image or a widget, such as jqxChart.


<div id="jqxRangeSelector">
    <div id="jqxRangeSelectorContent">
    </div>
</div>

Insert the jQuery document ready code inside the head section of your page


$(document).ready(function()
{
    // jqxRangeSelector initialization  code goes here.
}

The final step is to prepare the range selector display settings and initialize the range selector.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id="Description">This demo shows how to initialize a jqxRangeSelector widget.
    </title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxrangeselector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxRangeSelector").jqxRangeSelector(
            {
                 width: 500, height: 100, min: 0, max: 100, range: { from: 10, to: 50 }
            });
        });
    </script>
</head>
<body>
    <div id="jqxRangeSelector">
        <div id="jqxRangeSelectorContent">
        </div>
    </div>
</body>
</html>