Sencha Touch 2 Slider Field Extended Component

Home / ExtJS
Sencha Touch 2 Slider Field Extended Component
02April

Sencha Touch 2 Slider Field Extended Component

About the Author

Comments

    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?

    Thanks!

    Reply
      Khang Wei - April 24, 2012

      Hello,

      I found it in the js file (:

      self.setHelperValue(self.config.value);

      Thanks anyway!

      Reply
    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.

    Thanks
    Ram

    Reply
    Diego Link - July 23, 2012

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

    Reply
      Jo - December 16, 2012

      I've got the same problem.

      Do you fixed it ?

      Reply
    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 :
    http://jsfiddle.net/RcXgj/

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

    Reply
      gabriel - March 12, 2013

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

      Reply
    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.

    Reply
    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%;
    }

    Reply

Leave a Comment

Notify me of followup comments via e-mail

Get Adobe Flash player