Slider Fill

[tomalex0]

Just want to share sliderfill plugin, which can be used to apply background color for slider, when value is changed or thumb is moved. This supports slider with single and multiple thumb. Filling effects are not so fluid and i had to apply slider override to make it work.


You can find code here https://github.com/tomalex0/SenchaTouch-V2-SliderFill


Screenshots are available at
https://github.com/tomalex0/SenchaTo...l_vertical.png
https://github.com/tomalex0/SenchaTo...erfill_hor.png

Please have a look into the code and do let me know if it can be written in better way

Works with ST2RC

[mitchellsimoens]

Nice! I like the multiple thumb one!

[fdl]

Nice .... exactly what I need ...

Have you found a way to improved the " dragging fluidity"?

Regards

[Royale83]

Hello,

I am new to Sencha Touch, Javascript, Html (the lot).

I would appreciate if someone can tell me how to apply this plugin into my project. I would be very grateful if you could me a step by step guide if possible.

Thanks

[Nos]

I receive a javascript error when i use the Plugin :
TypeError : 'undefined' is not a function (evaluating 'thumb.getId()'

I don't know why ?

[Sasha172]

Love it !!
Just what I needed

Thanks

[Bhil]

Hi tomalex0!

This plugin is great and works fine in the browser if I follow your example on github but not in Architects Canvas (the cancas is empty). It seems like Plugins should be implemented with overrides and not with the 'plugins' option. But how do I create such an override in Architect for this Plugin?

Thanks for help

Bhil

[Nos]

If you use sencha Architect 2.1, you can do the followings:
1/ in your slider object, in the search bar, you write "plugins" and you touch add button.
2/ in your new property "plugins", you turn it to "object" ( click on the icon on the left of your object)
3/ click on code and write this :
[{ xclass:'Ext.plugin.SliderFill', fillCls: ['x-slider-fillClass']}]

And that's it !

[Bhil]

Thanks a lot for the quick answer!

Thats what I did but then the canvas is empy and I cannot configure other elements any more. Its an known issue. To work around this issue I was told to use overrides. But I dont know how to implement such an override in architect for only one slider.
Thank you for your help!

Bhil

[Bhil]

Ok I found a dirty workaround:

I just added "component.setPlugins(...)" to my init event for sliders.

It looks something like this:

component.setPlugins({
        xclass : 'Ext.plugin.SliderFill',
        fillCls : ['x-musicplayer-timer']
    }); 

Now the canvas still works.