Home Dojo Dojo Slider

Dojo Slider
Posted on: November 1, 2008 at 12:00 AM

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

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:

Related Tags for Dojo Slider:
c, ide, dojo, io, this, id, create, to, learn, ear, e, il, slide, section, li, in, out, j, how, do, s, at, is, ll, ea, and, ar, sli, s, s, th, ab, nd, on, o

«Previous Index Next»