1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    dnkupfer is on a distinguished road

      0  

    Default Unanswered: Slider styling and Container X position

    Unanswered: Slider styling and Container X position


    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.

    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    dnkupfer is on a distinguished road

      0  

    Default


    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