Slider on change event : Slider « Dojo toolkit « JavaScript DHTML






Slider on change event

 

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
         
        dojo.require("dijit.form.HorizontalSlider");
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.form.HorizontalSlider" name="caffeine"
    value="100"
    maximum="175"
    minimum="2"
    showButtons="false"
    style="margin: 5px;width:300px; height: 20px;">

    <script type="dojo/method" event="onChange" args="newValue">
        alert(dojo.number.format(newValue,{places:1,pattern:'#mg'}));
    </script>

    <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
        style="height:10px;font-size:75%;color:gray;" count="6">asdf
    </ol>

    <div dojoType="dijit.form.HorizontalRule" container="topDecoration"
        count=6 style="height:5px;">as
    </div>
</div>
</body>
</html>

   
  








Dojo-toolkit.zip( 3,849 k)

Related examples in the same category

1.Create vertical slider and set value, minimum, maximum and discreteValues
2.Horizontal slider bar
3.Simple slider
4.Slide back to original spot
5.Slide in animation
6.Slider on change dojo event
7.Max/min slider value
8.Set intermediateChanges for Slider
9.Set slide handle image
10.Format slider value