Graphic equalizer-type linked sliders

**Animal** · 9 Mar 2009 8:24 AM

I've just been playing a bit...

Drop the following code into examples/*

It creates a Panel of linked vertical sliders like a graphic equalizer widget. The sliders have a gradually weakening effect on their neighbours as you drag (Unless you use CTRL/drag)

SHIFT/drag locks them all together.

Have fun:

Code:

<html>
<head>
<title>Graphic Equalizer Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="slider.css">
<link rel="stylesheet" type="text/css" href="../examples.css">
<script type="text/javascript">
SliderGrouper = new function() {

    function onDragStart(s) {
        s.lastDragValue = s.getValue();
    }

    function onDrag(s, e) {
        var inc, s, idx, i, p, pinc;
        if (!e.ctrlKey && (inc = s.getValue() - s.lastDragValue)) {
            s.lastDragValue = s.getValue();
            idx = s.ownerCt.items.indexOf(s);
            for (i = 0; i < this.siblings.length; i++) {
                if (p = Math.abs(idx - i)) {
                    pinc = e.shiftKey ? inc : inc / Math.pow(1.5, (p + 0.5)/1.5);
                    s = this.siblings[i];
                    s.setValue(s.getValue() + pinc);
                }
            }
        }
    }

    this.init = function(host) {
        host.on({
            render: function(c) {
                if (c.isXType('slider')) {
                    host = c.ownerCt;
                }
                host.siblings = host.findByType('slider');
                for (var i = 0, s = this.siblings, l = s.length; i < l; i++) {
                    s[i].animate = s[i].decimalPrecision = false;
                    s[i].on({
                        dragstart: onDragStart,
                        drag: onDrag,
                        scope: host
                    });
                }
            },
            single: true
        });
    };
};

Ext.onReady(function() {
    new Ext.Panel({
        title: 'Linked Sliders',
        renderTo: document.body,
        frame: true,
        height: 200,
        width: 310,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        plugins: SliderGrouper,
        defaults: {
            margins: '0 0 0 10',
            xtype: 'slider',
            vertical: true
        },
        items: [
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {}
        ]
    });
});
</script>
</head>
<body/>
</html>

**mjlecomte** · 9 Mar 2009 8:40 AM

Do we need anything from slider.css?

**mjlecomte** · 9 Mar 2009 8:42 AM

The directory location looked suspicious, perhaps just link to the default one provided? Sorry, should test before opening my mouth.

**Animal** · 9 Mar 2009 8:45 AM

It actually highlights one of the problems of Ext.Slider. The native setValue just flatly rounds off all decimal precision. That's why I poke in an instance overide or normalizeValue which uses the provided Ext.round function.

It only rounds if you specify a decimalPrecision config.

I suppose this could default to zero.

**jay@moduscreate.com** · 9 Mar 2009 9:23 AM

That's awesome Nige!

May I suggest abstracting the plugin? Newbies may have trouble reading it.

**Animal** · 9 Mar 2009 10:30 AM

OK, it's a plugin class now.

**kayanat** · 9 Mar 2009 9:29 PM

thank you friend for sharing this wonderful script with us. but I was just wondering can I make the slider bar vertically? I want to do little customization, can I do that?

**Animal** · 10 Mar 2009 12:19 AM

Yes. Easily. Just refactor it using your Ext skills and the API docs!

**Richie1985** · 4 Mar 2013 9:57 AM

is it possible to set fieldlabels vertical?

Graphic equalizer-type linked sliders

Thread Tools

Search Thread

Display

Graphic equalizer-type linked sliders

Graphic equalizer-type linked sliders