ExtJS slider thumb going all the way up on click

Question

As the title says, I have a slider (Ext.slider.Single) it has a minValue of 0 and a maxValue o 14. After the user clicks somewhere the slider changes its min and max to 15 and 26 respectively.

If the slider is in the first config (0 - 14) I can move the thumb by clicking the position I want to set it in. But if the slider is in the second config, if I click anywhere on the slider the thumb just goes all the way up. I can only move it by dragging it.

The values are set ok since I show them on a tooltip and they show ok.

Any ideas ?

Edit: This is how I create the slider...

Ext.create('Ext.slider.Single', {
                                hideLabel: false,
                                name:'mySlider',
                                useTips: true,
                                increment:1,
                                vertical: true,
                                height:470,
                                minValue: 0,
                                maxValue: 14,
                                tipText: function(thumb){
                                        return Ext.String.format('<b>{0}</b>',thumb.slider.up('window').calculateValue(thumb.value));
                                    }
                            });

Answer 1

You need to use setMinValue/setMaxValue methods rather than just setting minValue/maxValue so the control can handle the new bounds.

Answer 2

I had the same problem!

When I do my_slider.setMinValue(min), the min value changes it, but the thumbs becomes crazy. Finally, I resolved it with the help of UnveN's post and a JavaScript function.

min = Number(min);
my_slider.setMinValue(min);