PDA

View Full Version : Ext.ux.SliderThumbSync. Lock MultiSlider thumbs together using SHIFT+drag



Animal
19 Aug 2010, 6:33 AM
Ext.ux.SliderThumbSync = new function() {
var onSliderDragStart = function(slider, e, thumb) {
if (thumb.shift = e.browserEvent.shiftKey) {
for (var ths = slider.thumbs, l = ths.length, i = 0, th; i < l; i++) {
if ((th = ths[i]) !== thumb) {
th.offset = th.value - thumb.value;
}
}
}
}, onSliderDrag = function(slider, e, thumb) {
if (thumb.shift) {
for (var ths = slider.thumbs, l = ths.length, i = 0, th; i < l; i++) {
if ((th = ths[i]) !== thumb) {
slider.setValue(i, thumb.value + th.offset, false);
}
}
}
}, onSliderDragEnd = function(slider, e) {
for (var ths = slider.thumbs, l = ths.length, i = 0, th; i < l; i++) {
delete ths[i].shift;
}
}, listenersObject = {
dragstart: onSliderDragStart,
drag: onSliderDrag,
dragend: onSliderDragEnd,
};

this.init = function(slider) {
slider.on(listenersObject);
};
};

Test it in examples/view/animated-dataview

Put that code at the top of the JS file, and than make the following change



var phoneSlider = new Ext.Slider({
width : 300,
minValue: 0,
maxValue: 500,
values : [80, 320],
plugins : [
Ext.ux.SliderThumbSync,
new Ext.slider.Tip({
getText: function(thumb) {
var s = thumb.slider;
return String.format('<b>${0} to ${1}</b>', s.thumbs[0].value, s.thumbs[1].value);
}
})
],

listeners: {
change: {
buffer: 70,
fn : filterData
}
}
});


Then by shift+drag (you only need to hold the shift key when you begin dragging), you can drag both thumbs.