Results 1 to 4 of 4

Thread: Showing thumb values on Ext JS Slider

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    2

    Default Showing thumb values on Ext JS Slider

    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?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    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 ...

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    2

    Default

    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:

    Code:
    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:

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

  4. #4
    Sencha Premium User alexander.urban's Avatar
    Join Date
    Nov 2013
    Posts
    320
    Answers
    9

    Default

    I'd like to point out that, at least in 4.2.2, you should use


    listeners:{
    afterrender: me.renderFn,
    change: me.renderFn,
    scope:me
    }



    renderFn:function(t, options) {
    for(i=0; i<t.thumbs.length; i++){
    var thumbElId = t.thumbs[i].el.id;
    Ext.DomHelper.overwrite(thumbElId,
    {
    tag: 'div',
    id: 'thumb-label-'+i,
    cls: 'thumb-label',
    html: t.thumbs[i].value,
    }
    );
    }
    }
    Otherwise, while it looks good at the first glance, the DOM is borked, as can be seen when you start adding colored borders or other "fancy" CSS to the labels.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •