Dojo Slider in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will see a slider created using dojo as displayed in the following figure.

Step 1: Associate the following styles to the XPage
      @import "../resources/dojo.css";
      @import "../dijit/themes/tundra/tundra.css";
 
Step 2: Add the following scripts to the page
        dojo.require("dojo.parser");
        dojo.require("dijit.form.Slider");

Step 3: Add the following mark up to the page
    <b>Slider:</b>
    <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
       value="5" minimum="-10" maximum="10" discreteValues="11"
       intermediateChanges="true"
       onChange="dojo.byId('horizontalSlider').value = arguments[0];document.getElementById('#{id:SliderValue}').value=arguments[0]"
       handleSrc="preciseSliderThumb.png"
     
       style="width: 250px"
    ></div>
  
    <xp:inputText id="SliderValue"></xp:inputText>  

Step 4: Now preview the page and see how it works on the browser

Hope this helps :)