[3.2] Ext.ux.slider.Highlight - A slider background color plugin

[mankz]

Here's a basic plugin which adds color to the background area between two slider handles. Only intented for use with 2 slider handles. The color is defined in the CSS but can also be updated by using the setColor method.

Untitled.png

Drop the attached folder into the examples folder of Ext 3.2.

PS. Not very well tested

JS:

Ext.ns('Ext.ux.slider');

Ext.ux.slider.Highlight = Ext.extend(Object, {
    
    init: function(slider) {
        this.slider = slider;
        var that = this;
        
        // Overwrite moveThumb method to update element after animated slide
        if (slider.vertical) {
            slider.moveThumb = function(index, v, animate) {
                var thumb = this.thumbs[index],
                    el    = thumb.el;

                if (!animate || this.animate === false) {
                    el.setBottom(v);
                } else {
                    el.shift({bottom: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
                }
            }
        } else {
            slider.moveThumb = function(index, v, animate){
                var thumb = this.thumbs[index].el;

                if(!animate || this.animate === false){
                    thumb.setLeft(v);
                }else{
                    thumb.shift({left: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
                }
            };
        }
        
        slider.on({
            scope    : this,
            afterrender   : this.onAfterRender,
            drag     : this.syncElementSize,
            dragend  : this.syncElementSize,
            changecomplete : this.syncElementSize,
            destroy  : this.destroy
        });
    },
    
    onAfterRender : function(s) {
        this.el = s.innerEl.createChild({
            cls : 'ext-ux-slider-highlight'
        });
        this.syncElementSize();
    },
    
    syncElementSize : function() {
        var s = this.slider;
        
        if (s.vertical) {
            var thumb1Bottom = s.thumbs[0].el.getBottom(true),
                thumb2Bottom = s.thumbs[1].el.getBottom(true),
                thumb1Top = s.thumbs[0].el.getTop(true),
                thumb2Top = s.thumbs[1].el.getTop(true),
                highlightTop = Math.min(thumb1Bottom, thumb2Bottom);
            
            this.el.setTop(highlightTop);
            this.el.setHeight(Math.max(thumb1Top, thumb2Top) - highlightTop);
        } else {
            var thumb1Right = s.thumbs[0].el.getRight(true),
                thumb2Right = s.thumbs[1].el.getRight(true),
                thumb1Left = s.thumbs[0].el.getLeft(true),
                thumb2Left = s.thumbs[1].el.getLeft(true),
                highlightLeft = Math.min(thumb1Right, thumb2Right);
            
            this.el.setLeft(highlightLeft);
            this.el.setWidth(Math.max(thumb1Left, thumb2Left) - highlightLeft);
        }
    },
    
    destroy : function() {
        this.slider.un({
            scope    : this,
            afterrender   : this.onRender,
            drag     : this.syncElementSize,
            dragend  : this.syncElementSize,
            changecomplete : this.syncElementSize,
            destroy  : this.destroy
        });
        this.el.destroy();
    },
    
    setColor : function(color) {
        this.el.setStyle('background-color', color);
    }
});

CSS:

.ext-ux-slider-highlight { 
    position: absolute;
    background : yellow;
    overflow:hidden;
}

.x-slider-vert .ext-ux-slider-highlight {
    width:6px;
    left:8px;
}

.x-slider-horz .ext-ux-slider-highlight {
    height:6px;
    top:8px;
}

[DamianHartin]

Nice one - thanks This just came in handy

[smithloganj]

Hi,
This extension has been working great for me, but I recently noticed that if you attempt to destroy a slider using the highlight, a javascript error occurs in the extension code where "slider is not defined" on the slider.un line of this function:

    destroy : function() {
        slider.un({
            scope    : this,
            afterrender   : this.onRender,
            drag     : this.syncElementSize,
            dragend  : this.syncElementSize,
            changecomplete : this.syncElementSize,
            destroy  : this.destroy
        });
        this.el.destroy();
    }

Does anyone know how to fix this? Or even how to just avoid it by first removing all plugins from the slider, and then destroying it?

Thanks!!

[mankz]

It should say "this.slider" instead of just "slider". Updating source now.

[bbg]

This slider is what i've been looking for.
Why don't you implement this range slider in GXT?

[macak82]

I also need this in GXT. Please!

[mankz]

Not very skilled in the art of GXT I'm afraid, try asking in the GXT help forums...

[armandoxxx]

Hey man

I'm still getting the error when destroying slider with your plugin !

Uncaught TypeError: Object #<Object> has no method 'toLowerCase'
h.Observable.removeListenerext-all.js:7
Ext.ux.slider.Highlight.Ext.extend.destroyext.ux.slider.highlight.js:75
h.Event.fire

any help would be appreciated

code from your plugin

destroy : function() {
        this.slider.un({
            scope    : this,
            afterrender   : this.onRender,
            drag     : this.syncElementSize,
            dragend  : this.syncElementSize,
            changecomplete : this.syncElementSize,
            destroy  : this.destroy
        });
        this.el.destroy();
    }

Kind regards

Armando

[armandoxxx]

Hey man

I've updated this code a little . please check and post reply of your oppinion

your code is still inside, it's just commented out.

Ext.ns('Ext.ux.slider');

Ext.ux.slider.Highlight = Ext.extend(Object, {
    
    init: function(slider) {
        this.slider = slider;
        var that = this;
        
        // Overwrite moveThumb method to update element after animated slide
        if (slider.vertical) {
            slider.moveThumb = function(index, v, animate) {
                var thumb = this.thumbs[index],
                    el    = thumb.el;

                if (!animate || this.animate === false) {
                    el.setBottom(v);
                } else {
                    el.shift({bottom: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
                }
            }
        } else {
            slider.moveThumb = function(index, v, animate){
                var thumb = this.thumbs[index].el;

                if(!animate || this.animate === false){
                    thumb.setLeft(v);
                }else{
                    thumb.shift({left: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
                }
            };
        }

		this.slider.on('afterrender', this.onAfterRender, this);
		this.slider.on('drag', this.syncElementSize, this);
		this.slider.on('dragend', this.syncElementSize, this);
		this.slider.on('changecomplete', this.syncElementSize, this);
		this.slider.on('destroy', this.destroy, this);
/*
        slider.on({
            scope    : this,
            afterrender   : this.onAfterRender,
            drag     : this.syncElementSize,
            dragend  : this.syncElementSize,
            changecomplete : this.syncElementSize,
            destroy  : this.destroy
        });*/
    },
    
    onAfterRender : function(s) {
        this.el = s.innerEl.createChild({
            cls : 'ext-ux-slider-highlight'
        });
        this.syncElementSize();
    },
    
    syncElementSize : function() {
        var s = this.slider;
        
        if (s.vertical) {
            var thumb1Bottom = s.thumbs[0].el.getBottom(true),
                thumb2Bottom = s.thumbs[1].el.getBottom(true),
                thumb1Top = s.thumbs[0].el.getTop(true),
                thumb2Top = s.thumbs[1].el.getTop(true),
                highlightTop = Math.min(thumb1Bottom, thumb2Bottom);
            
            this.el.setTop(highlightTop);
            this.el.setHeight(Math.max(thumb1Top, thumb2Top) - highlightTop);
        } else {
            var thumb1Right = s.thumbs[0].el.getRight(true),
                thumb2Right = s.thumbs[1].el.getRight(true),
                thumb1Left = s.thumbs[0].el.getLeft(true),
                thumb2Left = s.thumbs[1].el.getLeft(true),
                highlightLeft = Math.min(thumb1Right, thumb2Right);
            
            this.el.setLeft(highlightLeft);
            this.el.setWidth(Math.max(thumb1Left, thumb2Left) - highlightLeft);
        }
    },
    
    destroy : function() {
		this.slider.un('afterrender', this.onAfterRender, this);
		this.slider.un('drag', this.syncElementSize, this);
		this.slider.un('dragend', this.syncElementSize, this);
		this.slider.un('changecomplete', this.syncElementSize, this);
		this.slider.un('destroy', this.destroy, this);
       /* this.slider.un({
            scope    : this,
            afterrender   : this.onAfterRender,
            drag     : this.syncElementSize,
            dragend  : this.syncElementSize,
            changecomplete : this.syncElementSize,
            destroy  : this.destroy
        });*/
		Ext.destroy(this.el);
        //this.el.destroy();
    }
});

kind regards

Armando