View Full Version : Slider change event

14 Jul 2010, 10:20 AM
I have a question about the events associated with the Slider element. I have a carousel, but I want a secondary navigation method for it. So I've set up a slider that jumps to the appropriate item in the carousel when the value changes:

var slider = new Ext.form.Slider({
maxValue: 2,
maxHeight: 40,
listeners: {
change: function(slider, thumb, oldValue, newValue) {

This works great. However, another feature I want in my app is to have the title display for each carousel item as the slider is moved. Unfortunately, there's doesn't seem to be an event associated with the slider that could supply me with the value as the slider is being dragged. Am I missing something or is this not possible?

14 Jul 2010, 1:25 PM
There is no direct event on the Slider. Looking at the source code it does look you are able to do the following

var sliderBox = slider.fieldEl.getPageBox();

slider.getThumb().on('drag', function(draggable) {
var thumb = draggable.thumb,
thumbBox = thumb.el.getPageBox(),

thumbWidth = thumbBox.width,
halfWidth = thumbWidth / 2,
center = (thumbBox.left - sliderBox.left) + halfWidth;

var value = slider.getSliderValue(center, thumb);
// Now you can display this value somewhere

Note this code is untested, but it should work.

15 Jul 2010, 9:54 AM
It doesn't like your first line of code:

TypeError: Result of expression 'slider.fieldEl' [undefined] is not an object.