Reversing dojo slider to make it slide from right to left rather left to right as given

I am using Dojo slider in my project But i want to reverse the slider chosen value so that it slides from right to left ie the blueish part on slider must start from right side of the slider so that slider slides from right to left(not from left to right as in given example) how can i reverse this. My code a s shown

    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="../cmic/dojo/dojo/dojo.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.form.Slider");
            dojo.require("dijit.form.TextBox"); // this we only include to make the textinput look prettier
            dojo.addOnLoad(function() {

                var slider = new dijit.form.HorizontalSlider({
                    name: "slider",
                    value: 0,
                    minimum: 10,
                    maximum: 0,
                    intermediateChanges: true,
                    style: "width:700px;",
                    onChange: function(value) {
                     dojo.byId("sliderValue").value = value;
                    }
                },
                "slider");
            });
        </script>
        <link rel="stylesheet" type="text/css" href="../cmic/dojo/dijit/themes/claro/claro.css"
        />
    </head>

    <body class=" claro ">

        <div id="slider"  intermediateChanges="true" showButtons="false" style="width:400px;color:#606060;">
        <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
            style="height:1.5em;color:#585858;font-size:75%;color:gray;">
        <li>10
                </li>
             <li>
                    8
                </li>
                <li>
                    6
                </li>
                <li>
                    4
                </li>
             <li>
                    2
                </li>
                <li>0
                </li>
            </ol>



        <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
            style="height:1.5em;font-size:90%;color:#606060;margin:-1em 0px 0px 7.00em;">

               <li>
                    Outstanding
                </li>
                <li>
                    Highly effective
                </li>
                <li>
                    &nbsp&nbspEffective
                </li>
                <li>
                       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbspNeeds Improvement
                </li>
                <li>
                      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbspNot Acceptable
                </li>
               <li>

                </li></ol>


    </div>
        <p>
            <input type="text" id="sliderValue" dojoType="dijit.form.TextBox" />
        </p>
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>

View Answers