Dojo Slider
In this section, you will learn about slider and how to create a slider in dojo.
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.