dijit/form/HorizontalSlider.js

  • Provides:

    • dijit.form.HorizontalSlider

  • dijit.form.HorizontalSlider

    • type
      Function
    • chains:
      • dijit.form._FormValueWidget: (prototype)
      • dijit.form._FormValueWidget: (call)
      • dijit._Container: (call)
    • mixins:
      • dijit._Container.prototype: (prototype)
    • summary
      A form widget that allows one to select a value with a horizontally draggable handle

  • dijit.form.HorizontalSlider.templateString

    • summary
  • dijit.form.HorizontalSlider.value
       
    • summary
  • dijit.form.HorizontalSlider.showButtons
       
    • tags: const
    • type
      Boolean
    • summary
      Show increment/decrement buttons at the ends of the slider?
  • dijit.form.HorizontalSlider.minimum
       
    • tags: const
    • type
      Integer
    • summary
      The minimum value the slider can be set to.
  • dijit.form.HorizontalSlider.maximum
       
    • tags: const
    • type
      Integer
    • summary
      The maximum value the slider can be set to.
  • dijit.form.HorizontalSlider.discreteValues
       
    • type
      Integer
    • summary
      If specified, indicates that the slider handle has only 'discreteValues' possible positions,
and that after dragging the handle, it will snap to the nearest possible position.
Thus, the slider has only 'discreteValues' possible values.

For example, if minimum=10, maxiumum=30, and discreteValues=3, then the slider handle has
three possible positions, representing values 10, 20, or 30.

If discreteValues is not specified or if it's value is higher than the number of pixels
in the slider bar, then the slider handle can be moved freely, and the slider's value will be
computed/reported based on pixel position (in this case it will likely be fractional,
such as 123.456789).
  • dijit.form.HorizontalSlider.pageIncrement
       
    • type
      Integer
    • summary
      If discreteValues is also specified, this indicates the amount of clicks (ie, snap positions)
that the slider handle is moved via pageup/pagedown keys.
If discreteValues is not specified, it indicates the number of pixels.
  • dijit.form.HorizontalSlider.clickSelect
       
    • type
      Boolean
    • summary
      If clicking the slider bar changes the value or not
  • dijit.form.HorizontalSlider.slideDuration
       
    • type
      Number
    • summary
      The time in ms to take to animate the slider handle from 0% to 100%,
when clicking the slider bar to make the handle move.
  • dijit.form.HorizontalSlider.widgetsInTemplate
       
    • summary
  • dijit.form.HorizontalSlider.attributeMap
       
    • summary
  • dijit.form.HorizontalSlider.baseClass
       
    • summary
  • dijit.form.HorizontalSlider.cssStateNodes
       
    • type
      Object
    • summary
  • dijit.form.HorizontalSlider._mousePixelCoord
       
    • summary
  • dijit.form.HorizontalSlider._pixelCount
       
    • summary
  • dijit.form.HorizontalSlider._startingPixelCoord
       
    • summary
  • dijit.form.HorizontalSlider._startingPixelCount
       
    • summary
  • dijit.form.HorizontalSlider._handleOffsetCoord
       
    • summary
  • dijit.form.HorizontalSlider._progressPixelSize
       
    • summary
  • dijit.form.HorizontalSlider._onKeyUp
       
    • type
      Function
    • parameters: 
      • e: (typeof Event)
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly || e.altKey || e.ctrlKey || e.metaKey){ return; }
        this._setValueAttr(this.value, true);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._onKeyPress
       
    • type
      Function
    • parameters: 
      • e: (typeof Event)
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly || e.altKey || e.ctrlKey || e.metaKey){ return; }
        switch(e.charOrCode){
         case dojo.keys.HOME:
          this._setValueAttr(this.minimum, false);
          break;
         case dojo.keys.END:
          this._setValueAttr(this.maximum, false);
          break;
         // this._descending === false: if ascending vertical (min on top)
         // (this._descending || this.isLeftToRight()): if left-to-right horizontal or descending vertical
         case ((this._descending || this.isLeftToRight()) ? dojo.keys.RIGHT_ARROW : dojo.keys.LEFT_ARROW):
         case (this._descending === false ? dojo.keys.DOWN_ARROW : dojo.keys.UP_ARROW):
         case (this._descending === false ? dojo.keys.PAGE_DOWN : dojo.keys.PAGE_UP):
          this.increment(e);
          break;
         case ((this._descending || this.isLeftToRight()) ? dojo.keys.LEFT_ARROW : dojo.keys.RIGHT_ARROW):
         case (this._descending === false ? dojo.keys.UP_ARROW : dojo.keys.DOWN_ARROW):
         case (this._descending === false ? dojo.keys.PAGE_UP : dojo.keys.PAGE_DOWN):
          this.decrement(e);
          break;
         default:
          return;
        }
        dojo.stopEvent(e);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._onHandleClick
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly){ return; }
        if(!dojo.isIE){
         // make sure you get focus when dragging the handle
         // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
         dijit.focus(this.sliderHandle);
        }
        dojo.stopEvent(e);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._isReversed
       
    • type
      Function
    • source: [view] 
                    
      

                      return !this.isLeftToRight();
                    
      
                    
    • summary
      Returns true if direction is from right to left
    • tags: 
  • dijit.form.HorizontalSlider._onBarClick
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly || !this.clickSelect){ return; }
        dijit.focus(this.sliderHandle);
        dojo.stopEvent(e);
        var abspos = dojo.position(this.sliderBarContainer, true);
        var pixelValue = e[this._mousePixelCoord] - abspos[this._startingPixelCoord];
        this._setPixelValue(this._isReversed() ? (abspos[this._pixelCount] - pixelValue) : pixelValue, abspos[this._pixelCount], true);
        this._movable.onMouseDown(e);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._setPixelValue
       
    • type
      Function
    • parameters: 
      • pixelValue: (typeof Number)
      • maxPixels: (typeof Number)
      • priorityChange: (typeof Boolean)
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly){ return; }
        pixelValue = pixelValue < 0 ? 0 : maxPixels < pixelValue ? maxPixels : pixelValue;
        var count = this.discreteValues;
        if(count <= 1 || count == Infinity){ count = maxPixels; }
        count--;
        var pixelsPerValue = maxPixels / count;
        var wholeIncrements = Math.round(pixelValue / pixelsPerValue);
        this._setValueAttr((this.maximum-this.minimum)*wholeIncrements/count + this.minimum, priorityChange);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._setValueAttr
       
    • type
      Function
    • parameters: 
      • value: (typeof Number)
      • priorityChange: (typeof Boolean)
    • source: [view] 
                    
      

                      this._set("value", value);
        this.valueNode.value = value;
        dijit.setWaiState(this.focusNode, "valuenow", value);
        this.inherited(arguments);
        var percent = (value - this.minimum) / (this.maximum - this.minimum);
        var progressBar = (this._descending === false) ? this.remainingBar : this.progressBar;
        var remainingBar = (this._descending === false) ? this.progressBar : this.remainingBar;
        if(this._inProgressAnim && this._inProgressAnim.status != "stopped"){
         this._inProgressAnim.stop(true);
        }
        if(priorityChange && this.slideDuration > 0 && progressBar.style[this._progressPixelSize]){
         // animate the slider
         var _this = this;
         var props = {};
         var start = parseFloat(progressBar.style[this._progressPixelSize]);
         var duration = this.slideDuration * (percent-start/100);
         if(duration == 0){ return; }
         if(duration < 0){ duration = 0 - duration; }
         props[this._progressPixelSize] = { start: start, end: percent*100, units:"%" };
         this._inProgressAnim = dojo.animateProperty({ node: progressBar, duration: duration,
          onAnimate: function(v){ remainingBar.style[_this._progressPixelSize] = (100-parseFloat(v[_this._progressPixelSize])) + "%"; },
          onEnd: function(){ delete _this._inProgressAnim; },
          properties: props
         })
         this._inProgressAnim.play();
        }else{
         progressBar.style[this._progressPixelSize] = (percent*100) + "%";
         remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%";
        }
                    
      
                    
    • summary
      Hook so set('value', value) works.
  • dijit.form.HorizontalSlider._bumpValue
       
    • type
      Function
    • parameters: 
      • signedChange: (typeof )
      • priorityChange: (typeof Boolean)
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly){ return; }
        var s = dojo.getComputedStyle(this.sliderBarContainer);
        var c = dojo._getContentBox(this.sliderBarContainer, s);
        var count = this.discreteValues;
        if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; }
        count--;
        var value = (this.value - this.minimum) * count / (this.maximum - this.minimum) + signedChange;
        if(value < 0){ value = 0; }
        if(value > count){ value = count; }
        value = value * (this.maximum - this.minimum) / count + this.minimum;
        this._setValueAttr(value, priorityChange);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._onClkBumper
       
    • type
      Function
    • parameters: 
      • val: (typeof )
    • source: [view] 
                    
      

                      if(this.disabled || this.readOnly || !this.clickSelect){ return; }
        this._setValueAttr(val, true);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._onClkIncBumper
       
    • type
      Function
    • source: [view] 
                    
      

                      this._onClkBumper(this._descending === false ? this.minimum : this.maximum);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._onClkDecBumper
       
    • type
      Function
    • source: [view] 
                    
      

                      this._onClkBumper(this._descending === false ? this.maximum : this.minimum);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider.decrement
       
    • type
      Function
    • parameters: 
      • e: (typeof Event)
    • source: [view] 
                    
      

                      this._bumpValue(e.charOrCode == dojo.keys.PAGE_DOWN ? -this.pageIncrement : -1);
                    
      
                    
    • summary
      Decrement slider
    • tags: 
  • dijit.form.HorizontalSlider.increment
       
    • type
      Function
    • parameters: 
      • e: (typeof Event)
    • source: [view] 
                    
      

                      this._bumpValue(e.charOrCode == dojo.keys.PAGE_UP ? this.pageIncrement : 1);
                    
      
                    
    • summary
      Increment slider
    • tags: 
  • dijit.form.HorizontalSlider._mouseWheeled
       
    • type
      Function
    • parameters: 
      • evt: (typeof Event)
    • source: [view] 
                    
      

                      dojo.stopEvent(evt);
        var janky = !dojo.isMozilla;
        var scroll = evt[(janky ? "wheelDelta" : "detail")] * (janky ? 1 : -1);
        this._bumpValue(scroll < 0 ? -1 : 1, true); // negative scroll acts like a decrement
                    
      
                    
    • summary
      Event handler for mousewheel where supported
  • dijit.form.HorizontalSlider.startup
       
    • type
      Function
    • source: [view] 
                    
      

                      if(this._started){ return; }


        dojo.forEach(this.getChildren(), function(child){
         if(this[child.container] != this.containerNode){
          this[child.container].appendChild(child.domNode);
         }
        }, this);


        this.inherited(arguments);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider._typematicCallback
       
    • type
      Function
    • parameters: 
      • count: (typeof Number)
      • button: (typeof Object)
      • e: (typeof Event)
    • source: [view] 
                    
      

                      if(count == -1){
         this._setValueAttr(this.value, true);
        }else{
         this[(button == (this._descending? this.incrementButton : this.decrementButton)) ? "decrement" : "increment"](e);
        }
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider.buildRendering
       
    • type
      Function
    • source: [view] 
                    
      

                      this.inherited(arguments);
        if(this.showButtons){
         this.incrementButton.style.display="";
         this.decrementButton.style.display="";
        }


        // find any associated label element and add to slider focusnode.
        var label = dojo.query('label[for="'+this.id+'"]');
        if(label.length){
         label[0].id = (this.id+"_label");
         dijit.setWaiState(this.focusNode, "labelledby", label[0].id);
        }


        dijit.setWaiState(this.focusNode, "valuemin", this.minimum);
        dijit.setWaiState(this.focusNode, "valuemax", this.maximum);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider.postCreate
       
    • type
      Function
    • source: [view] 
                    
      

                      this.inherited(arguments);


        if(this.showButtons){
         this._connects.push(dijit.typematic.addMouseListener(
          this.decrementButton, this, "_typematicCallback", 25, 500));
         this._connects.push(dijit.typematic.addMouseListener(
          this.incrementButton, this, "_typematicCallback", 25, 500));
        }
        this.connect(this.domNode, !dojo.isMozilla ? "onmousewheel" : "DOMMouseScroll", "_mouseWheeled");


        // define a custom constructor for a SliderMover that points back to me
        var mover = dojo.declare(dijit.form._SliderMover, {
         widget: this
        });
        this._movable = new dojo.dnd.Moveable(this.sliderHandle, {mover: mover});


        this._layoutHackIE7();
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider.destroy
       
    • type
      Function
    • source: [view] 
                    
      

                      this._movable.destroy();
        if(this._inProgressAnim && this._inProgressAnim.status != "stopped"){
         this._inProgressAnim.stop(true);
        }
        this._supportingWidgets = dijit.findWidgets(this.domNode); // tells destroy about pseudo-child widgets (ruler/labels)
        this.inherited(arguments);
                    
      
                    
    • summary
  • dijit.form.HorizontalSlider.cssStateNodes.incrementButton
       
    • summary
  • dijit.form.HorizontalSlider.cssStateNodes.decrementButton
       
    • summary
  • dijit.form.HorizontalSlider.cssStateNodes.focusNode
       
    • summary
  • dijit.form.HorizontalSlider._descending
       
    • summary
  • dijit.form.HorizontalSlider.valueNode.value
       
    • summary
  • dijit.form.HorizontalSlider._inProgressAnim
       
    • summary
  • dijit.form.HorizontalSlider.incrementButton.style.display
       
    • summary
  • dijit.form.HorizontalSlider.decrementButton.style.display
       
    • summary
  • dijit.form.HorizontalSlider._movable
       
    • summary
  • dijit.form.HorizontalSlider._supportingWidgets
       
    • summary
  • dijit.form._SliderMover
       
    • type
      Function
    • chains: 
      • dojo.dnd.Mover: (prototype)
      • dojo.dnd.Mover: (call)
    • summary
  • dijit.form._SliderMover.onMouseMove
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      var widget = this.widget;
        var abspos = widget._abspos;
        if(!abspos){
         abspos = widget._abspos = dojo.position(widget.sliderBarContainer, true);
         widget._setPixelValue_ = dojo.hitch(widget, "_setPixelValue");
         widget._isReversed_ = widget._isReversed();
        }
        var coordEvent = e.touches ? e.touches[0] : e, // if multitouch take first touch for coords
         pixelValue = coordEvent[widget._mousePixelCoord] - abspos[widget._startingPixelCoord];
        widget._setPixelValue_(widget._isReversed_ ? (abspos[widget._pixelCount]-pixelValue) : pixelValue, abspos[widget._pixelCount], false);
                    
      
                    
    • summary
  • dijit.form._SliderMover.destroy
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      dojo.dnd.Mover.prototype.destroy.apply(this, arguments);
        var widget = this.widget;
        widget._abspos = null;
        widget._setValueAttr(widget.value, true);
                    
      
                    
    • chains: 
      • dojo.dnd.Mover.prototype.destroy: (call)
    • summary
  • dijit.form
       
    • type
      Object
    • summary
  • dijit
       
    • type
      Object
    • summary