Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxRangeSelector.

jqx-widget - applied to the RangeSelector widget.
jqx-rangeselector - applied to RangeSelector widget.
jqx-rangeselector-slider - applied to RangeSelector's Slider element.
jqx-scrollbar-thumb-state-normal - applied to RangeSelector's Slider element.
jqx-rangeselector-shutter - applied to the areas which are situated on the Left and Right side of the Slider.
jqx-scrollbar-state-normal - applied to the areas which are situated on the Left and Right side of the Slider.
jqx-rangeselector-markers - applied to RangeSelector's Left and Right markers.
jqx-fill-state-normal - applied to RangeSelector's Left and Right markers.
jqx-fill-state-hover - applied to RangeSelector's Left and Right markers on Hover.
jqx-fill-state-pressed - applied to RangeSelector's Left and Right markers on Drag.
jqx-rangeselector-markers-value - applied to the element which displays the value in the markers.
jqx-rangeselector-marker-arrow - applied to the Left and Right marker arrows.
jqx-rangeselector-marker-left-arrow - applied to the Left marker arrow.
jqx-rangeselector-marker-right-arrow - applied to the Right marker arrow.
jqx-rangeselector-marker-arrow-bottom - applied to the markers markersPosition is set to "bottom"
jqx-rangeselector-marker-arrow-top - applied to the markers markersPosition is set to "top"
jqx-rangeselector-labels - applied to RangeSelector's labels.
jqx-rangeselector-group-labels - applied to the Group labels.
jqx-rangeselector-ticks - applied to RangeSelector's ticks.
jqx-fill-state-disabled - applied to the RangeSelector when it is disabled.

When you create a custom style with colors and backgrounds for jqxRangeSelector, you need to do the following:

Add the above CSS classes related to jqxRangeSelector.
After each CSS class, add your theme name.
For example:
jqx-rangeselector-energyblue
To apply your custom style to jqxRangeSelector, you need to set its 'theme' property(option) to point to your theme's name.

The sample below demonstrates how to set the 'Energy Blue' theme to jqxRangeSelector.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo shows how to apply the Energy Blue theme to the Range Selector.</title>
    <link type="text/css" rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <link type="text/css" rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.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" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxRangeSelector.
            $("#rangeSelector").jqxRangeSelector({ theme: 'energyblue', width: 500, height: 100, min: 0, max: 100, range: { from: 10, to: 50 }, majorTicksInterval: 10, minorTicksInterval: 1 });
            // create Set Range and Get Range buttons.
            $("#setSelection").jqxButton({ theme: 'energyblue' });
            $("#getSelection").jqxButton({ theme: 'energyblue' });
            $("#setSelection").click(function () {
                // Set Range.
                $("#rangeSelector").jqxRangeSelector("setRange", 30, 70);
            });
            $("#getSelection").click(function () {
                // Get Range.
                var range = $("#rangeSelector").jqxRangeSelector("getRange");
                alert("The selected range is from " + range.from + " to " + range.to);
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id="rangeSelector">
        <div id="rangeSelectorContent">
        </div>
    </div>
    <div id="Div1" style="margin-left: 50px; margin-top: 50px;">
    <button id="setSelection">
        Set range</button>
    <button id="getSelection">
        Get range</button>
    </div>
</body>
</html>