View Full Version : Vertical Slider Question

16 Mar 2010, 1:11 PM
I have extended the Ext.Slider component and created my own component. I have vertical set to true. I am using the slider to zoom in/out on a map. The veritcal from how I have it set up has min at bottom and max at top of slider. I'm trying to figure out how to reverse this. The higher up the slider vertically the handle is dragged I need it to zoom in more towards a street level. The more I pull down on handle I need it to zoom out to a state and world view. My problem is trying to use the min/max values a zoomed in level has a lesser value of height than a state level.

Can anyone offer me any insight on how I could accomplish what i'm trying to get at with the zoom in/out on the slider? Is there any way to inverse the slider vertically so min is at top level and max is at bottom? Thanks for any help

22 Mar 2010, 2:05 PM
I was able to solve this one myself doing some simple math. I found the solution to this to be to take the most zoomed in value and substract it from the most zoomed out value and then divide by a value to equally distribute the increments into chunks. For example if the zoomed in value is 2000 and zoomed out value is 600000 and the range is 0 to 100 the calculation will be
(600000 - 2000) / 100 = 5980.

You can then take this value and on changecomplete you can determine what the height is based on the slider value. For example if the slider is at 25 you can write a loop that will start at max and decrement until slider value is reached. You can change your scale as needed, I just used 0 to 100.

var sliderVal = this.getValue();
var increment = 5980;
var val = 600000; // max is starting point

for(i = 0; i < 100; i++) {
// decrease by increment each time
val = val - increment;
// stop once hitting the slider value
if(i == sliderVal) {
// At this point the calculated value will be the level to zoom to
return val;