Sencha Touch 2 Slider Field Extended Component

Home / ExtJS
Sencha Touch 2 Slider Field Extended Component

Sencha Touch 2 Slider Field Extended Component

About the Author


    Khang Wei - April 24, 2012

    Hello, this is awesome!

    However, I have a question:

    I tried changing the slider value at runtime ( using .setValue() ), it changes the slider value but not the slider-helper-input at the side (textbox).

    Can I have some guidance on this?


      Khang Wei - April 24, 2012


      I found it in the js file (:


      Thanks anyway!

    Ram - July 9, 2012

    Can we please add + and - buttons instead of up and down arrows if we can please show us how to add.


    Diego Link - July 23, 2012

    It seems clicking on the helper doesn't fire a change event to the slider

      Jo - December 16, 2012

      I've got the same problem.

      Do you fixed it ?

    J-dog - February 16, 2013

    This is a great extension and is exactly what I am looking for, however it appears that this extension is slightly broken as the slider and text fields overlap when running under Sencha Touch 2.1.1

    Here is your example updated to run under Sencha Touch 2.1.1 :

    Any chance you could update the extension to work with the latest version of sencha touch?

      gabriel - March 12, 2013

      i agree. this is broken on 2.1.1. any hope of getting an update?

    Zac - March 29, 2013

    @J-dog & @gabriel: I don't have a complete solution yet but perhaps this will point you in the right direction.

    Under Sencha Touch 2.2 I too found that the slider overlapped the input. When I stepped through everything I noticed that the applyComponent function was returning Ext.slider.Slider instead of (I guess) Ext.field.Slider.

    I changed this:
    return Ext.factory(config, Ext.slider.Slider);

    to this:
    return Ext.factory(config, Ext.field.Slider);

    ...and things were better.

    Brandon - June 14, 2013

    The solution to fix the overlap on Sencha Touch 2.1+ is merely to edit the css. Add this class:

    .x-slider {
    width: 70%;

Get Adobe Flash player