Is it possible to invert a vertical slider?

Yes, you can modify SliderBehavior.js so the drag handle is relative to the bottom of the slider rather than the top. This partial solution only enables an end-user to key-in a number into the textbox and, when 'enter' is depressed, the handle moves to the correct location relative to the bottom. More modifications are required in SliderBehavior.js to ensure handle drag and drop functionality continues to work too. A more complete solution might mean enhancing the slider code to service a new orientation parameter value (e.g., Orientation="InverseVertical") or a new parameter entirely (e.g., Inverse="True").

SliderBehavior.js

if(playHandleAnimation) {this._handleAnimation.set_startValue(handleBounds.x - sliderBounds.x);this._handleAnimation.set_endValue(offset);this._handleAnimation.set_propertyKey((this._isHorizontal) ?'left' :'bottom');this._handleAnimation.play();this._animationPending =false; }else {if(this._isHorizontal) {this._handle.style.left = offset +'px'; }else {this._handle.style.bottom = offset +'px'; } }

I think the proper method is to actually use negative numbers. You don't need to modify the code to get what you want.

If you code the following, then clickability, draggability and textbox-entry functionalities fail:

<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server" BehaviorID="Slider2" TargetControlID="Slider2" BoundControlID="Slider2_BoundControl" Orientation="Vertical" EnableHandleAnimation="true" Minimum="-10" Maximum="-100" />

If you code the following, then the smaller ordinal (-100) is above the larger ordinal (-10). How does that solve the original poster's specification?

<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server" BehaviorID="Slider2" TargetControlID="Slider2" BoundControlID="Slider2_BoundControl" Orientation="Vertical" EnableHandleAnimation="true" Minimum="-100" Maximum="-10" />

Using negative values works it just always displays a negative value in the results textbox which will likely confuse my end user. Changing the .js would obviously work except that the reason I'm using the control is because it is a slider ... In other words, if the end user can't drag-n-drop, why have a slider at all? I'll just remove it and use a textbox with a range validator.

I restate my original position: why would you have a slider that increases in value when descending? For instance, say you're using a slider as a volume control: sliding up should increase the volume. Another example (the one I'm actually using): the end user is taking inventory on a storage tank and needs to indicate how full the tank is. The bottom of the slider should be 0 (or empty) and the top should indicate full.

I won't be rolling out this feature for a while so I can wait and perhaps a new attribute will be added to allow this, or at the very least it would seem more intuitive to me that if the ability to invert is not possible then the default behavior should be as I've described here.

Anyway, this toolkit is proving very valuable in my application so I commend all who have worked on it to get it to this point.

Cheers

What do you mean "if the ability to invert is not possible"? With two lines of code changed, it's been demonstrated above that the answer to your question is 'yes'.

Your original question was not 'Could someone please re-write the sample slider so it makes more sense?' (Which, of course, it would)

If you're waiting for someone to do something, it could be a long time. The point of these toolkit samples being open-source is so that you can take one fellow's idea (e.g., Garbin's vertical slider sample), code different functionality into it, thereby creating a better idea. To wit, an enhanced Campbell's vertical slider that exhibits the behavior that you want it to.

At this point, the only code you and/or others in this open-source community need to work-out is how to make the draggability of the enhanced tool continue to function effectively when the slider ordinals are inverse.

In terms of rolling-out, it's a good idea to not do so using this beta base. It's unstable, buggy, changes often and for some unknown/unnecessary reason is the result of what appears to be a management 'rush to market' paradigm.

"The value of an idea lies in the using of it." - Thomas Alva Edison

I have gotten this working with the following modifications to the SliderBehavior.js file. This is based on the 1.0 RTM version. This does not require the changes in the prior post, and corrects for positioning the slider through drag-and-drop. Hopefully someone will find this useful.

Changes to _calcValue if a value is supplied.

else { var _minimum =this._minimum; var _maximum =this._maximum; var handleBounds =this._getHandleBounds(); var sliderBounds =this._getRailBounds(); var handleX = (mouseOffset) ? mouseOffset - handleBounds.width / 2 : handleBounds.x - sliderBounds.x; var extent = sliderBounds.width - handleBounds.width;//MODIFIED this Conditional for inverse vertical sliderif (this._isHorizontal) {//ORIGINAL Calculations var percent = handleX / extent; val = (handleX == 0) ? _minimum : (handleX == (sliderBounds.width - handleBounds.width)) ? _maximum : _minimum + percent * (_maximum - _minimum); }else {//MODIFIED Inverse Vertical Slider var percent = 1 - (handleX / extent); val = (handleX == 0) ? _maximum : (handleX == (sliderBounds.width - handleBounds.width)) ? _minimum : _minimum + percent * (_maximum - _minimum); } }

Changes to _setHandleOffset

 _setHandleOffset : function(value, playHandleAnimation) { var _minimum =this._minimum; var _maximum =this._maximum; var handleBounds =this._getHandleBounds(); var sliderBounds =this._getRailBounds();//MODIFIED this Conditional for inverse vertical sliderif (this._isHorizontal) {//ORIGINAL Calculations var extent = _maximum - _minimum; var fraction = (value - _minimum) / extent; var hypOffset = Math.round(fraction * (sliderBounds.width - handleBounds.width)); var offset = (value == _minimum) ? 0 : (value == _maximum) ? (sliderBounds.width - handleBounds.width) : hypOffset; }else {//MODIFIED: Inverted Vertical Slider var extent = _minimum - _maximum; var fraction = (value - _maximum) / extent; var hypOffset = Math.round(fraction * (sliderBounds.width - handleBounds.width)); var offset = (value == _maximum) ? 0 : (value == _minimum) ? (sliderBounds.width - handleBounds.width) : hypOffset; }