Dojo slider problem - how to add numbers with slider - dojo

Question

I have Dojo slider and I need to put from 0 to 24 h (0,1,2, ... 24).How to achive this ?
I have this:
<div id="vertical_monday" style="float: left;"></div>
and create like this :
var vertical_monday = dojo.byId("vertical_monday");
var rulesNodeMonday = document.createElement('div');
vertical_monday.appendChild(rulesNodeMonday);
var sliderRulesMonday = new dijit.form.VerticalRule({
count: 24,
style: "width:5px;"
},
rulesNodeMonday);
var slider = new dijit.form.VerticalSlider({
name: "vertical_monday",
value: 0,
minimum: 1440,
maximum: 0,
pageIncrement:100,
showButtons:true,
slideDuration:289,
discreteValues: 289,
intermediateChanges:true,
style: "height:500px;",
onChange: function(value) {
//dojo.byId("sliderValueMonday").value = value;
set_time_labels('mon',used_length['mon'],value);
val['mon']=value;
var a=(500*(value-used_length['mon']))/1440;
var temp_id='mon_'+temp_daily_plan['mon'];
$('#'+temp_id).css('height',a);
}
},
vertical_monday);
but it doesn't have numbers . How to add numbers ?

Answer 1

Here's a quick and dirty way to do it, not sure if it's the recommended one.
Add a container for the labels, just like you did with the ruler.
var labelsNodeMonday = document.createElement("div");
vertical_monday.appendChild(labelsNodeMonday);
Then create a dijit.form.VerticalRuleLabels instance and place it in that node, explicitly providing the labels as an array:
var labelsMonday = new dijit.form.VerticalRuleLabels({
labels: ["1h", "2h", "3h", "4h"] //.. and so on
}, labelsNodeMonday);
Or alternatively, if you don't like to repeat yourself.
var labelsMonday = new dijit.form.VerticalRuleLabels({
getLabels: function() {
for(var labels = [], i = 1; i <=24; i++) labels.push(i+"h");
return labels;
},
}, labelsNodeMonday);
Again, I don't know if this is the kosher way. Ideally, there should be something along the lines of:
var labelsMonday = new dijit.form.VerticalRuleLabels({
minimum: 1, maximum: 24, step: 1,
formatLabel: function(value) { return value + "h"; }
}, labelsNodeMonday);
.. but afaik there isn't at the moment.