Dojo Slider

In this section, you will learn about slider and how to create a slider in dojo.

Dojo Slider

Dojo Slider

        

In this section, you will learn about slider and how to create a slider in dojo.

Try Online: Slider

Slider : A slider is a GUI (Graphical User Interface) component. In other words a slider is a scale with handle a dragged values up/down or left/right. Calling the dojo slider by using the dojo.require("dijit.form.Slider") that provides dijit.form.HorizontalSlider, dijit.form.VerticalSlider and all rules and label classes. 

The following code fills a simple textbox called horizontalSliderValue.

Here is the code of Program:

<html>
<head>

<title>Slider Example 1</title>

  <style type="text/css">
  @import "../resources/dojo.css";
  @import "../dijit/themes/tundra/tundra.css";
  
  </style>
  <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">
 dojo.require("dojo.parser");
 dojo.require("dijit.form.Slider");
  </script>
</head>

  <body class="tundra">
  <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];"
 handleSrc="preciseSliderThumb.png"
  ></div>
  </body>
</html>

Output of the Program:

When you click the left side button (-) then decrease the value of slider and click the right side button (+) then increase the value of slider.

 

Try Online: