RangeSlider.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.form.RangeSlider"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.form.RangeSlider"] = true;
  8. dojo.provide("dojox.form.RangeSlider");
  9. dojo.require("dijit.form.HorizontalSlider");
  10. dojo.require("dijit.form.VerticalSlider");
  11. dojo.require("dojox.fx");
  12. (function(){
  13. // make these functions once:
  14. var sortReversed = function(a, b){ return b - a; },
  15. sortForward = function(a, b){ return a - b; }
  16. ;
  17. dojo.declare("dojox.form._RangeSliderMixin", null, {
  18. value: [0,100],
  19. postMixInProperties: function(){
  20. this.inherited(arguments);
  21. this.value = dojo.map(this.value, function(i){ return parseInt(i, 10); });
  22. },
  23. postCreate: function(){
  24. this.inherited(arguments);
  25. // we sort the values!
  26. // TODO: re-think, how to set the value
  27. this.value.sort(this._isReversed() ? sortReversed : sortForward);
  28. // define a custom constructor for a SliderMoverMax that points back to me
  29. var _self = this;
  30. var mover = dojo.declare(dijit.form._SliderMoverMax, {
  31. constructor: function(){
  32. this.widget = _self;
  33. }
  34. });
  35. this._movableMax = new dojo.dnd.Moveable(this.sliderHandleMax,{ mover: mover });
  36. dijit.setWaiState(this.focusNodeMax, "valuemin", this.minimum);
  37. dijit.setWaiState(this.focusNodeMax, "valuemax", this.maximum);
  38. // a dnd for the bar!
  39. var barMover = dojo.declare(dijit.form._SliderBarMover, {
  40. constructor: function(){
  41. this.widget = _self;
  42. }
  43. });
  44. this._movableBar = new dojo.dnd.Moveable(this.progressBar,{ mover: barMover });
  45. },
  46. destroy: function(){
  47. this.inherited(arguments);
  48. this._movableMax.destroy();
  49. this._movableBar.destroy();
  50. },
  51. _onKeyPress: function(/*Event*/ e){
  52. if(this.disabled || this.readOnly || e.altKey || e.ctrlKey){ return; }
  53. var useMaxValue = e.target === this.sliderHandleMax;
  54. var barFocus = e.target === this.progressBar;
  55. var k = dojo.delegate(dojo.keys, this.isLeftToRight() ? {PREV_ARROW: dojo.keys.LEFT_ARROW, NEXT_ARROW: dojo.keys.RIGHT_ARROW}
  56. : {PREV_ARROW: dojo.keys.RIGHT_ARROW, NEXT_ARROW: dojo.keys.LEFT_ARROW});
  57. var delta = 0;
  58. var down = false;
  59. switch(e.keyCode){
  60. case k.HOME : this._setValueAttr(this.minimum, true, useMaxValue);dojo.stopEvent(e);return;
  61. case k.END : this._setValueAttr(this.maximum, true, useMaxValue);dojo.stopEvent(e);return;
  62. case k.PREV_ARROW :
  63. case k.DOWN_ARROW : down = true;
  64. case k.NEXT_ARROW :
  65. case k.UP_ARROW : delta = 1; break;
  66. case k.PAGE_DOWN : down = true;
  67. case k.PAGE_UP : delta = this.pageIncrement; break;
  68. default : this.inherited(arguments);return;
  69. }
  70. if(down){delta = -delta;}
  71. if(delta){
  72. if(barFocus){
  73. this._bumpValue([
  74. { change: delta, useMaxValue: false },
  75. { change: delta, useMaxValue: true }
  76. ]);
  77. }else{
  78. this._bumpValue(delta, useMaxValue);
  79. }
  80. dojo.stopEvent(e);
  81. }
  82. },
  83. _onHandleClickMax: function(e){
  84. if(this.disabled || this.readOnly){ return; }
  85. if(!dojo.isIE){
  86. // make sure you get focus when dragging the handle
  87. // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
  88. dijit.focus(this.sliderHandleMax);
  89. }
  90. dojo.stopEvent(e);
  91. },
  92. _onClkIncBumper: function(){
  93. this._setValueAttr(this._descending === false ? this.minimum : this.maximum, true, true);
  94. },
  95. _bumpValue: function(signedChange, useMaxValue){
  96. // we pass an array to _setValueAttr when signedChange is an array
  97. var value = dojo.isArray(signedChange) ? [
  98. this._getBumpValue(signedChange[0].change, signedChange[0].useMaxValue),
  99. this._getBumpValue(signedChange[1].change, signedChange[1].useMaxValue)
  100. ]
  101. : this._getBumpValue(signedChange, useMaxValue)
  102. this._setValueAttr(value, true, useMaxValue);
  103. },
  104. _getBumpValue: function(signedChange, useMaxValue){
  105. var idx = useMaxValue ? 1 : 0;
  106. if( this._isReversed() ) {
  107. idx = 1 - idx;
  108. }
  109. var s = dojo.getComputedStyle(this.sliderBarContainer),
  110. c = dojo._getContentBox(this.sliderBarContainer, s),
  111. count = this.discreteValues,
  112. myValue = this.value[idx]
  113. ;
  114. if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; }
  115. count--;
  116. var value = (myValue - this.minimum) * count / (this.maximum - this.minimum) + signedChange;
  117. if(value < 0){ value = 0; }
  118. if(value > count){ value = count; }
  119. return value * (this.maximum - this.minimum) / count + this.minimum;
  120. },
  121. _onBarClick: function(e){
  122. if(this.disabled || this.readOnly){ return; }
  123. if(!dojo.isIE){
  124. // make sure you get focus when dragging the handle
  125. // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
  126. dijit.focus(this.progressBar);
  127. }
  128. dojo.stopEvent(e);
  129. },
  130. _onRemainingBarClick: function(e){
  131. if(this.disabled || this.readOnly){ return; }
  132. if(!dojo.isIE){
  133. // make sure you get focus when dragging the handle
  134. // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
  135. dijit.focus(this.progressBar);
  136. }
  137. // now we set the min/max-value of the slider!
  138. var abspos = dojo.coords(this.sliderBarContainer, true),
  139. bar = dojo.coords(this.progressBar, true),
  140. relMousePos = e[this._mousePixelCoord] - abspos[this._startingPixelCoord],
  141. leftPos = bar[this._startingPixelCount],
  142. rightPos = leftPos + bar[this._pixelCount],
  143. isMaxVal = this._isReversed() ? relMousePos <= leftPos : relMousePos >= rightPos,
  144. p = this._isReversed() ? abspos[this._pixelCount] - relMousePos : relMousePos
  145. ;
  146. this._setPixelValue(p, abspos[this._pixelCount], true, isMaxVal);
  147. dojo.stopEvent(e);
  148. },
  149. _setPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels, /*Boolean*/ priorityChange, /*Boolean*/ isMaxVal){
  150. if(this.disabled || this.readOnly){ return; }
  151. var myValue = this._getValueByPixelValue(pixelValue, maxPixels);
  152. this._setValueAttr(myValue, priorityChange, isMaxVal);
  153. },
  154. _getValueByPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels){
  155. pixelValue = pixelValue < 0 ? 0 : maxPixels < pixelValue ? maxPixels : pixelValue;
  156. var count = this.discreteValues;
  157. if(count <= 1 || count == Infinity){ count = maxPixels; }
  158. count--;
  159. var pixelsPerValue = maxPixels / count;
  160. var wholeIncrements = Math.round(pixelValue / pixelsPerValue);
  161. return (this.maximum-this.minimum)*wholeIncrements/count + this.minimum;
  162. },
  163. _setValueAttr: function(/*Array or Number*/ value, /*Boolean, optional*/ priorityChange, /*Boolean, optional*/ isMaxVal){
  164. // we pass an array, when we move the slider with the bar
  165. var actValue = this.value;
  166. if(!dojo.isArray(value)){
  167. if(isMaxVal){
  168. if(this._isReversed()){
  169. actValue[0] = value;
  170. }else{
  171. actValue[1] = value;
  172. }
  173. }else{
  174. if(this._isReversed()){
  175. actValue[1] = value;
  176. }else{
  177. actValue[0] = value;
  178. }
  179. }
  180. }else{
  181. actValue = value;
  182. }
  183. // we have to reset this values. don't know the reason for that
  184. this._lastValueReported = "";
  185. this.valueNode.value = this.value = value = actValue;
  186. dijit.setWaiState(this.focusNode, "valuenow", actValue[0]);
  187. dijit.setWaiState(this.focusNodeMax, "valuenow", actValue[1]);
  188. this.value.sort(this._isReversed() ? sortReversed : sortForward);
  189. // not calling the _setValueAttr-function of dijit.form.Slider, but the super-super-class (needed for the onchange-event!)
  190. dijit.form._FormValueWidget.prototype._setValueAttr.apply(this, arguments);
  191. this._printSliderBar(priorityChange, isMaxVal);
  192. },
  193. _printSliderBar: function(priorityChange, isMaxVal){
  194. var percentMin = (this.value[0] - this.minimum) / (this.maximum - this.minimum);
  195. var percentMax = (this.value[1] - this.minimum) / (this.maximum - this.minimum);
  196. var percentMinSave = percentMin;
  197. if(percentMin > percentMax){
  198. percentMin = percentMax;
  199. percentMax = percentMinSave;
  200. }
  201. var sliderHandleVal = this._isReversed() ? ((1-percentMin)*100) : (percentMin * 100);
  202. var sliderHandleMaxVal = this._isReversed() ? ((1-percentMax)*100) : (percentMax * 100);
  203. var progressBarVal = this._isReversed() ? ((1-percentMax)*100) : (percentMin * 100);
  204. if (priorityChange && this.slideDuration > 0 && this.progressBar.style[this._progressPixelSize]){
  205. // animate the slider
  206. var percent = isMaxVal ? percentMax : percentMin;
  207. var _this = this;
  208. var props = {};
  209. var start = parseFloat(this.progressBar.style[this._handleOffsetCoord]);
  210. var duration = this.slideDuration / 10; // * (percent-start/100);
  211. if(duration === 0){ return; }
  212. if(duration < 0){ duration = 0 - duration; }
  213. var propsHandle = {};
  214. var propsHandleMax = {};
  215. var propsBar = {};
  216. // hui, a lot of animations :-)
  217. propsHandle[this._handleOffsetCoord] = { start: this.sliderHandle.style[this._handleOffsetCoord], end: sliderHandleVal, units:"%"};
  218. propsHandleMax[this._handleOffsetCoord] = { start: this.sliderHandleMax.style[this._handleOffsetCoord], end: sliderHandleMaxVal, units:"%"};
  219. propsBar[this._handleOffsetCoord] = { start: this.progressBar.style[this._handleOffsetCoord], end: progressBarVal, units:"%"};
  220. propsBar[this._progressPixelSize] = { start: this.progressBar.style[this._progressPixelSize], end: (percentMax - percentMin) * 100, units:"%"};
  221. var animHandle = dojo.animateProperty({node: this.sliderHandle,duration: duration, properties: propsHandle});
  222. var animHandleMax = dojo.animateProperty({node: this.sliderHandleMax,duration: duration, properties: propsHandleMax});
  223. var animBar = dojo.animateProperty({node: this.progressBar,duration: duration, properties: propsBar});
  224. var animCombine = dojo.fx.combine([animHandle, animHandleMax, animBar]);
  225. animCombine.play();
  226. }else{
  227. this.sliderHandle.style[this._handleOffsetCoord] = sliderHandleVal + "%";
  228. this.sliderHandleMax.style[this._handleOffsetCoord] = sliderHandleMaxVal + "%";
  229. this.progressBar.style[this._handleOffsetCoord] = progressBarVal + "%";
  230. this.progressBar.style[this._progressPixelSize] = ((percentMax - percentMin) * 100) + "%";
  231. }
  232. }
  233. });
  234. dojo.declare("dijit.form._SliderMoverMax", dijit.form._SliderMover, {
  235. onMouseMove: function(e){
  236. var widget = this.widget;
  237. var abspos = widget._abspos;
  238. if(!abspos){
  239. abspos = widget._abspos = dojo.coords(widget.sliderBarContainer, true);
  240. widget._setPixelValue_ = dojo.hitch(widget, "_setPixelValue");
  241. widget._isReversed_ = widget._isReversed();
  242. }
  243. var coordEvent = e.touches ? e.touches[0] : e; // if multitouch take first touch for coords
  244. var pixelValue = coordEvent[widget._mousePixelCoord] - abspos[widget._startingPixelCoord];
  245. widget._setPixelValue_(widget._isReversed_ ? (abspos[widget._pixelCount]-pixelValue) : pixelValue, abspos[widget._pixelCount], false, true);
  246. },
  247. destroy: function(e){
  248. dojo.dnd.Mover.prototype.destroy.apply(this, arguments);
  249. var widget = this.widget;
  250. widget._abspos = null;
  251. widget._setValueAttr(widget.value, true);
  252. }
  253. });
  254. dojo.declare("dijit.form._SliderBarMover", dojo.dnd.Mover, {
  255. onMouseMove: function(e){
  256. var widget = this.widget;
  257. if(widget.disabled || widget.readOnly){ return; }
  258. var abspos = widget._abspos;
  259. var bar = widget._bar;
  260. var mouseOffset = widget._mouseOffset;
  261. if(!abspos){
  262. abspos = widget._abspos = dojo.coords(widget.sliderBarContainer, true);
  263. widget._setPixelValue_ = dojo.hitch(widget, "_setPixelValue");
  264. widget._getValueByPixelValue_ = dojo.hitch(widget, "_getValueByPixelValue");
  265. widget._isReversed_ = widget._isReversed();
  266. }
  267. if(!bar){
  268. bar = widget._bar = dojo.coords(widget.progressBar, true);
  269. }
  270. var coordEvent = e.touches ? e.touches[0] : e; // if multitouch take first touch for coords
  271. if(!mouseOffset){
  272. mouseOffset = widget._mouseOffset = coordEvent[widget._mousePixelCoord] - abspos[widget._startingPixelCoord] - bar[widget._startingPixelCount];
  273. }
  274. var pixelValueMin = coordEvent[widget._mousePixelCoord] - abspos[widget._startingPixelCoord] - mouseOffset,
  275. pixelValueMax = pixelValueMin + bar[widget._pixelCount];
  276. // we don't narrow the slider when it reaches the bumper!
  277. // maybe there is a simpler way
  278. pixelValues = [pixelValueMin, pixelValueMax]
  279. ;
  280. pixelValues.sort(sortForward);
  281. if(pixelValues[0] <= 0){
  282. pixelValues[0] = 0;
  283. pixelValues[1] = bar[widget._pixelCount];
  284. }
  285. if(pixelValues[1] >= abspos[widget._pixelCount]){
  286. pixelValues[1] = abspos[widget._pixelCount];
  287. pixelValues[0] = abspos[widget._pixelCount] - bar[widget._pixelCount];
  288. }
  289. // getting the real values by pixel
  290. var myValues = [
  291. widget._getValueByPixelValue(widget._isReversed_ ? (abspos[widget._pixelCount] - pixelValues[0]) : pixelValues[0], abspos[widget._pixelCount]),
  292. widget._getValueByPixelValue(widget._isReversed_ ? (abspos[widget._pixelCount] - pixelValues[1]) : pixelValues[1], abspos[widget._pixelCount])
  293. ];
  294. // and setting the value of the widget
  295. widget._setValueAttr(myValues, false, false);
  296. },
  297. destroy: function(){
  298. dojo.dnd.Mover.prototype.destroy.apply(this, arguments);
  299. var widget = this.widget;
  300. widget._abspos = null;
  301. widget._bar = null;
  302. widget._mouseOffset = null;
  303. widget._setValueAttr(widget.value, true);
  304. }
  305. });
  306. dojo.declare("dojox.form.HorizontalRangeSlider",
  307. [dijit.form.HorizontalSlider, dojox.form._RangeSliderMixin],
  308. {
  309. // summary:
  310. // A form widget that allows one to select a range with two horizontally draggable images
  311. templateString: dojo.cache("dojox.form", "resources/HorizontalRangeSlider.html", "<table class=\"dijit dijitReset dijitSlider dijitSliderH dojoxRangeSlider\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\" dojoAttachEvent=\"onkeypress:_onKeyPress,onkeyup:_onKeyUp\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"topDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderDecrementIconH\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper\" dojoAttachEvent=\"onmousedown:_onClkDecBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><div role=\"presentation\" class=\"dojoxRangeSliderBarContainer\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div dojoAttachPoint=\"sliderHandle\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableH\" dojoAttachEvent=\"onmousedown:_onHandleClick\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleH\"></div\n\t\t\t\t></div\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"progressBar,focusNode\" class=\"dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH\" dojoAttachEvent=\"onmousedown:_onBarClick\"></div\n\t\t\t\t><div dojoAttachPoint=\"sliderHandleMax,focusNodeMax\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableH\" dojoAttachEvent=\"onmousedown:_onHandleClickMax\" role=\"sliderMax\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleH\"></div\n\t\t\t\t></div\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH\" dojoAttachEvent=\"onmousedown:_onRemainingBarClick\"></div\n\t\t\t></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper\" dojoAttachEvent=\"onmousedown:_onClkIncBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderIncrementIconH\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"containerNode,bottomDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n></table>\n")
  312. }
  313. );
  314. dojo.declare("dojox.form.VerticalRangeSlider",
  315. [dijit.form.VerticalSlider, dojox.form._RangeSliderMixin],
  316. {
  317. // summary:
  318. // A form widget that allows one to select a range with two vertically draggable images
  319. templateString: dojo.cache("dojox.form", "resources/VerticalRangeSlider.html", "<table class=\"dijitReset dijitSlider dijitSliderV dojoxRangeSlider\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerV\"\n\t\t\t><div class=\"dijitSliderIncrementIconV\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\" dojoAttachEvent=\"onclick: increment\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><center><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperV dijitSliderTopBumper\" dojoAttachEvent=\"onclick:_onClkIncBumper\"></div></center\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td dojoAttachPoint=\"leftDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationL dijitSliderDecorationV\" style=\"text-align:center;height:100%;\"></td\n\t\t><td class=\"dijitReset\" style=\"height:100%;\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><center role=\"presentation\" style=\"position:relative;height:100%;\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarV dijitSliderRemainingBar dijitSliderRemainingBarV\" dojoAttachEvent=\"onmousedown:_onRemainingBarClick\"\n\t\t\t\t\t><div dojoAttachPoint=\"sliderHandle\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableV\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_onHandleClick\" style=\"vertical-align:top;\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleV\"></div\n\t\t\t\t\t></div\n\t\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"progressBar,focusNode\" tabIndex=\"${tabIndex}\" class=\"dijitSliderBar dijitSliderBarV dijitSliderProgressBar dijitSliderProgressBarV\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_onBarClick\"\n\t\t\t\t\t></div\n\t\t\t\t\t><div dojoAttachPoint=\"sliderHandleMax,focusNodeMax\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableV\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_onHandleClickMax\" style=\"vertical-align:top;\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleV\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t></center\n\t\t></td\n\t\t><td dojoAttachPoint=\"containerNode,rightDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationR dijitSliderDecorationV\" style=\"text-align:center;height:100%;\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><center><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperV dijitSliderBottomBumper\" dojoAttachEvent=\"onclick:_onClkDecBumper\"></div></center\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerV\"\n\t\t\t><div class=\"dijitSliderDecrementIconV\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\" dojoAttachEvent=\"onclick: decrement\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n></table>\n")
  320. }
  321. );
  322. })();
  323. }