DojoHorizontalRangeSlider

by andrew rowe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/form/resources/RangeSlider.css">
<body class="claro">
    <table>
        <tr>
            <td>
                <div id='low'></div>
            </td>
            <td>
                <div id="rangeSlider"></div>
            </td>
            <td>
                <div id='high'></div>
            </td>
        </tr>
    </table>
    <div id='change'></div>
</body>

CSS

.box {
    float: left
}
/*
See managed resources for file containing:

.dojoxRangeSlider .dijitSliderLeftBumper, .dojoxRangeSlider .dijitSliderBottomBumper  {
    background:#FFFFFF !important;
}
.dojoxRangeSliderBarContainer {
    position:relative;
}
.dojoxRangeSlider .dijitSliderProgressBarV {
    position:relative !important;
}
.dojoxRangeSlider .dijitSliderProgressBar {
    overflow:hidden;
    cursor:pointer;
    
}
.dojoxRangeSlider .dijitSliderProgressBarV {
    position:absolute !important;
    border-width: 0px;
}
.dojoxRangeSlider .dijitSliderImageHandleH {
    left: -50%;
}
.dijitSlider .dojoxRangeSliderBarContainer .dijitSliderProgressBarH,
.dojoxRangeSlider .dijitSliderMoveableH {
        right:auto !important;
}
*/

JavaScript

/*
Using this as reference: 
http://dojotoolkit.org/reference-guide/1.8/dojox/form/RangeSlider.html
*/
require([
    'dojo/ready',
    'dojo/parser',
    'dojox/form/RangeSlider'], function (ready, parser, RangeSlider) {
    ready(function () {
        parser.parse();
        dojo.byId('low').innerHTML = 2;
        dojo.byId('high').innerHTML = 6;

        var rangeSlider = new dojox.form.HorizontalRangeSlider({
            name: "rangeSlider",
            value: [2, 6],
            minimum: 0,
            maximum: 10,
            style: "width:12em;",
            onChange: function (value) {
                dojo.byId('change').innerHTML = value[0] + ' -- ' + value[1] + ' this ' + this.id;
                dojo.byId('low').innerHTML = value[0].toFixed(2);
                dojo.byId('high').innerHTML = value[1].toFixed(2);
            }
        }, "rangeSlider");
    });
});