Login Register
Home » Support » Forums » Dijit (dijit.*, 0.9+) » Dijit Support » [solved] Programmatically adding rules and labels to a slider

[solved] Programmatically adding rules and labels to a slider

Submitted by rotorhead on Sun, 11/25/2007 - 23:11.

Hi everybody!

I've already searched the forum and tests but couldn't find the answer... how do I prgrammatically add rules and labels to a slider?

Here is the code fragment I've got so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Untitled Document</title>
                <link href="wiki.css" rel="stylesheet" type="text/css" />
               
                <style type="text/css">
                        @import "../lib/dojo/resources/dojo.css";
                        @import "../lib/dijit/themes/tundra/tundra.css";
                </style>
               
                <script type="text/javascript" src="../lib/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true, usePlainJson: true, preventBackButtonFix: false"></script>
               
                <script type="text/javascript">
                        dojo.require("dojo.parser");    // scan page for widgets and instantiate them
                               
                        dojo.require("dijit.form.Slider");
                       
                        function initSlider(){
                                console.info("init slider");
                                console.debug(dojo.byId("symptomContainer"));
                               
                                var slider = new dijit.form.HorizontalSlider({
                                        name:"horizontal2",
                                        minimum: 1,
                                        value: 3,
                                        maximum: 5,
                                        discreteValues: 5,
                                        showButtons: true,
                                        intermediateChanges: true,
                                        style: "width: 300px; height: 40px",
                                        id:"slider3"
                                },dojo.byId("symptomContainerCPU"));
                               
                                //HOW DO I ADD THE LABELS AND THE RULES TO THE SLIDER?
                               
                                //var rule = new dijit.form.HorizontalRule({container: slider.domNode,count: 5, ruleStyle:"height:5px;"});
                                //var labels = new dijit.form.HorizontalRuleLabels(rule,{labels: ["1","2","3","4","5"], labelStyle:"height:1em;font-size:75%;color:gray;"});

                        }
                       
                        dojo.addOnLoad(initSlider);
                </script>
        </head>
       
        <body class="tundra">
                <div id="symptomContainerCPU" style="width: 800px; height: 500px;"></div>
        </body>
‹ Posting a file upload from a modal... Styling multiple accordions differently ›

Can't noboby help?

Submitted by rotorhead on Thu, 11/29/2007 - 14:40.

Hi!

I'm wondering if really nobody can help me with this problem?
I'm not the only one with it: http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/how-creat...

Please, I really need some help here...

Cheers,
rotorhead

i just came up with this.

Submitted by dante on Thu, 11/29/2007 - 16:08.

i just came up with this. hope this helps.

// programatic vertical slider and labels
var programaticExample = function(){
	
	var node = dojo.byId("programaticSlider");
	// or var node = dojo.body().appendChild(document.createElement('div'));

	// our rules are to be children of the slider
	var rulesNode = document.createElement('div');
	node.appendChild(rulesNode);

	// setup the rules
	var sliderRules = new dijit.form.VerticalRule({
		count:10,
		style:"width:5px" 
	},rulesNode);

	// and setup the slider
	var theSlider = new dijit.form.VerticalSlider({ 
		value:1500,
		onChange: function(){
                                                console.log(arguments);
		},
		style:"height:165px",
		minimum:1000,
		maximum:3000,
		discreteValues:10,
		intermediateChanges:"true",
		showButtons:"true"
	},node);

	// and start them both
	theSlider.startup();
    	sliderRules.startup();

};
dojo.addOnLoad(programaticExample);

Thanks!!! :-)

Submitted by rotorhead on Fri, 11/30/2007 - 00:20.

Hi Dante!

Thank you very much for your example! It really helped me a lot! :-)

Cheerio,
rotorhead

Added labels to the example

Submitted by rotorhead on Fri, 11/30/2007 - 22:34.

Hi!

Since no slider widget is complete with some labels I've added labels to the example:

// programatic vertical slider and labels
var programaticExample = function(){
       
        var node = dojo.byId("programaticSlider");
        // or var node = dojo.body().appendChild(document.createElement('div'));

        // our rules are to be children of the slider
        var rulesNode = document.createElement('div');
        node.appendChild(rulesNode);

        // setup the rules
        var sliderRules = new dijit.form.VerticalRule({
                count:10,
                style:"width:5px"
        },rulesNode);
				
	// the labels are to be children of the slider
	var rulesNodeLabels = document.createElement('div');
	node.appendChild(rulesNodeLabels);
				
	// setup the labels
	var sliderLabels = new dijit.form.VerticalRuleLabels({
		count: 5,
		style: "height:1.2em;font-size:75%;color:gray;",					
		labels: ['low','1','medium','2','high']
	},rulesNodeLabels);

        // and setup the slider
        var theSlider = new dijit.form.VerticalSlider({
                value:1500,
                onChange: function(){
                                                console.log(arguments);
                },
                style:"height:165px",
                minimum:1000,
                maximum:3000,
                discreteValues:10,
                intermediateChanges:"true",
                showButtons:"true"
        },node);

        // and start them both
        theSlider.startup();
        sliderRules.startup();
	sliderLabels.startup();


};
dojo.addOnLoad(programaticExample);

@Dojo-Team: Why not simply add the two label and rule objects to the constructor of the slider?

Cheerio,
rotorhead

Hi Rotorhead and Dante!

Submitted by rodrigo on Sat, 12/01/2007 - 01:22.

Hi Rotorhead and Dante!

I added labels (left and right sides):

var programaticExample = function(){
       
        //var node = dojo.byId("programaticSlider");
        //or

        var node = dojo.body().appendChild(document.createElement('div'));

        //setup Left labels
        var rulesLeftLabel = document.createElement('div');
        node.appendChild(rulesLeftLabel);
       
        var rulesLeftLabels = new dijit.form.VerticalRuleLabels({
                container:"leftDecoration",  //=>Left side of slider
                count:2,
                labels:["min","max"],
                style:"width:2em;font-size:75%;color:gray"
        },rulesLeftLabel);   
       
        // our rules are to be children of the slider
        var rulesLeftNode = document.createElement('div');
        node.appendChild(rulesLeftNode);

        // setup the Left rules
        var sliderLeftRules = new dijit.form.VerticalRule({
                container:"leftDecoration", //=>Left side of slider
                count:11,
                style:"width:5px"
        },rulesLeftNode);

        // our rules are to be children of the slider
        var rulesRightNode = document.createElement('div');
        node.appendChild(rulesRightNode);

        // setup the Right rules
        var sliderRightRules = new dijit.form.VerticalRule({
                container:"rightDecoration", //=>Right side of slider
                count:11,
                style:"width:5px"
        },rulesRightNode);
                               
        // the labels are to be children of the slider
        var rulesRightLabels = document.createElement('div');
        node.appendChild(rulesRightLabels);
                               
        // setup the Right labels
        var rulesRightLabels = new dijit.form.VerticalRuleLabels({
                container:"rightDecoration", //=>Right side of slider
                count: 11,
                labels: ["0","1000","2000","3000","4000","5000","6000","7000","8000","9000","10000"],
                style:"width:2em;font-size:75%;color:gray"                                   
        },rulesRightLabels);

        // and setup the slider
        var theSlider = new dijit.form.VerticalSlider({
                value:5000,
                onChange: function(){
                console.log(this.currentValue = arguments[0]);
                },
                style:"height:165px",
                minimum:0,
                maximum:10000,
                discreteValues:11,
                intermediateChanges:"true",
                showButtons:"true"
        },node);

        // and start all
        theSlider.startup();
        sliderLeftRules.startup();
        sliderRightRules.startup();
        rulesRightLabels.startup();
        rulesLeftLabels.startup();

};
dojo.addOnLoad(programaticExample);

.
A great hug,

Thank you again! :)

Rodrigo