Showing thumb values on Ext JS Slider

[fonoro]

I need some insight on how to go about fixing a shortcoming in Ext.slider.Multi. I would like to display the values of the thumbs. One option would be to display a label below the thumbs, like this:

option_1.png


the other, displaying the tooltip with the value permanenlty, not just on mouse click.


option_2.png
Any ideas?

[scottmartin]

You would have to override the slider and the tip .. for example, this will stop the tip from hiding, but you will have to correct the issue of dragging the other thumb stealing the other tip.

Starting point ...

Ext.override(Ext.slider.Tip, {
    
    init: function(slider) {
        var me = this,
            align,
            offsets;
        
        if (!me.position) {
            me.position = slider.vertical ? me.defaultVerticalPosition : me.defaultHorizontalPosition;
        }
            
        switch (me.position) {
            case 'top':
                offsets = [0, -10];
                align = 'b-t?';
                break;
            case 'bottom':
                offsets = [0, 10];
                align = 't-b?';
                break;
            case 'left':
                offsets = [-10, 0];
                align = 'r-l?';
                break;
            case 'right':
                offsets = [10, 0];
                align = 'l-r?';
        }
        
        if (!me.align) {
            me.align = align;
        }
        
        if (!me.offsets) {
            me.offsets = offsets;
        }

        slider.on({
            scope    : me,
            dragstart: me.onSlide,
            drag     : me.onSlide,
      //      dragend  : me.hide,
            destroy  : me.destroy
        });
    },    
    
});

Ext.create('Ext.slider.Multi', {
    width: 200,
    values: [25, 75],
    increment: 5,
    minValue: 0,
    maxValue: 100,

    constrainThumbs: false,
    renderTo: Ext.getBody()
});

Scott.

[fonoro]

Thank you Scott. In the end, i went the other route and implemented "Option 1". The tool-tips take too much space above the slider and need a lot of code to work smoothly.

This is how I did it. I am sure it can be improved, but I guess the concept should be useful to someone else.

I added this two listeners of the slider:

afterrender: function(t, options) {
    for(i=0; i<t.thumbs.length; i++){
        var thumbElId = t.thumbs[i].el.id;
        Ext.DomHelper.append(thumbElId,
            {
            tag: 'div',
                id: 'thumb-label-'+i,
                cls: 'thumb-label',
                html: t.thumbs[i].value,
            }
        );
    }
},
change: function(t, options) {
    for(i=0; i<t.thumbs.length; i++){
        var thumbLabelElId = 'thumb-label-'+i;
        Ext.DomHelper.overwrite(thumbLabelElId,
            {
            tag: 'div',
                id: 'thumb-label-'+i,
                cls: 'thumb-label',
                html: t.thumbs[i].value,
            }
        );
        Ext.get(thumbLabelElId).applyStyles("margin-left:0%");
    }
}

and this to the stylesheet:

.thumb-label {
    margin-top: 18px;
    margin-left: -50%;
}