Slider styling and Container X position

[dnkupfer]

Hi there,

I've been trying to customise a slider to a point that it could look like this

Screen-shot-2012-06-13-at-22.03.jpg

I've been using "xtype: 'sliderfield'" but not finding exactly how to style it.


I've decided to construct the slider out of nested "containers" and got it to do almost everything I need it to, but still finding it difficult to move the container to the centre of the slider on initialisation.

Please see my code.

Ext.define("Test.view.Main", {    extend: 'Ext.Container',
    config: {
        items:[{
            width: 400,
            height: 70,
            layout: 'fit',
            items:[{
                xtype: 'container',
                style: 'background: rgba(0, 0, 0, 0.5); color: white;',
                layout:'fit',
                items:[{
                    xtype: 'container',
                    style: 'background: rgba(255, 0, 0, 0.5); color: white;',
                    width: 320,
                    height: 10,
                    margin: 30,
                },{
                    xtype: 'container',
                    style: 'background: rgba(255, 0, 255, 0.0); color: white;',
                    width: 340,
                    height: 30,
                    margin: 20,
                    items:[{
                        xtype: 'container',
                        style: 'background: rgba(255, 255, 0, 0.8); color: white;',
                        width: 30,
                        height: 30,
                        draggable: true,
                        id: 'dani',
                        listeners: {
                            element: 'element',
                            drag: function(e) {
                                console.log( e.pageX );
                            },
                        }
                    }]
                }],
            }]
        }]
    }
});

Any help will be much appreciated,
Daniel

[mitchellsimoens]

I would stick with the slider field, give it a cls and then target your CSS to get the x-thumb under the cls you gave the sliderfield.

[dnkupfer]

Hi mitchellsimoens,

many thanks for helping. Would you be able to point me to the documentation where I could consult CSS properties for the Ext.field.Slider such as x-thumb? Apologies if I'm missing something obvious but I can't seem to find it anywhere.

Thanks,
Daniel