Carousel swipe conflicts with slider drag

[Mike6679]

I have a slider within a carousel item. It seems half the time when I try to slide the thumb on the slider, Sencha thinks I'm swiping to the next carousel item. I tried increasing the width of my thumb but it doesn't seem to help no matter how big the thumb is. Is there any way have slider and my carousel not compete with each other?

[bricemason]

Have you tried to do what's described here?:

http://www.sencha.com/forum/showthread.php?207781

Brice

[Mike6679]

Thanks Brice and while that is a sure fire way to cancel and start carousel swipe events , it doesn't help with my dilema. I have a carousel page in which I have a slider and for some reason on the ipad you have to be very precise how you tap the thumb otherwise Sencha thinks its a swipe so turing off the carrousel events do not really help. I tried increasing the size of the thumb and the hit area on top of it but still you have to be very precise with your tap on the ipad. In the browser however, the thumb is much more forgiving. 

[bricemason]

I see what you mean now. I did some tests and I think I can duplicate what you're experiencing. I used this example:

Ext.define('Slider.view.Main', {
    extend: 'Ext.Carousel',
    xtype: 'main',
    requires: [
        'Ext.field.Slider',
        'Ext.form.FieldSet'
    ],
    config: {
        items: [
            {
                html: 'Slider with Carousel',
                items: [
                    {
                        xtype: 'fieldset',
                        docked: 'bottom',
                        items: [
                            {
                                xtype: 'sliderfield',
                                minValue: 0,
                                maxValue: 100,
                                value: 50,
                                increment: 1
                            }
                        ]
                    }
                    
                ]
            },
            {
                html: 'Second Card'
            }
        ]
    }
});

and tried it out on my iPad which worked well. There wasn't any mixup between using the slider and detecting the swipe on the carousel.

However if I just use the plain slider without the fieldset, I believe I can experience exactly what you are and it's consistent.

So the question is, how is your view configured? Have you tried to wrap it in a fieldset?

I also tested this with my Nexus 10 tablet and that demonstrated the same behavior too.

Brice

[Mike6679]

Brice,
I have created a custom component for my slider so I can just drop it in anywhere. It does extend Ext.field.Field:

Ext.define('MyApp.view.SliderExtended', {
  extend  : 'Ext.field.Field',
  xtype   : 'sliderextended',
  requires: [
    'Ext.slider.Slider'
  ],
  alternateClassName: 'Ext.form.SliderExtended',
  


  config: {
    cls: Ext.baseCSSPrefix + 'slider-field-extended',
    tabIndex: -1//,
    //helperPosition: 'right'
  },


  proxyConfig: {
    value: 0,
    minValue: 0,
    maxValue: 100,
    increment: 1
  },


  constructor: function(config) {
    config = config || {};


    if (config.hasOwnProperty('values')) {
      config.value = config.values;
    }


    this.callParent([config]);
  },
  
  initialize: function() {
    this.callParent();
    
    this.getComponent().on({
      scope: this,
      change: 'onSliderChange',
      dragstart: 'onSliderDragStart',
      drag: 'onSliderDrag',
      dragend: 'onSliderDragEnd',
     
    });
  },
   


   
  setHelperValue: function(value) {
    var value = value;
    this.helperInput.dom.value = value;
  },
  
  // @private
  applyComponent: function(config) {
    /*
    var self = this;
    self.helper.setStyle('float', self.config.helperPosition);
    var changeValue = function(e) {
      var keycode = e.which || window.event.keyCode;
      if( [8, 9, 13, 37, 38, 39, 40, 46].indexOf(Number(keycode)) !== -1 ) return true;
      var helperInputValue = Number(self.helperInput.getValue());
      if(helperInputValue < self.config.minValue || isNaN(helperInputValue))
      helperInputValue = self.config.minValue;
      else if(helperInputValue > self.config.maxValue)
      helperInputValue = self.config.maxValue;
      this.value = helperInputValue;
      self.setValue(helperInputValue);
    };
    self.helperInput.dom.onkeydown = function(e) {
      var keycode = e.which || window.event.keyCode;
      if( [8, 9, 13, 37, 38, 39, 40, 46, 190].indexOf(Number(keycode)) !== -1 ) return true;
      if( keycode > 57 || keycode < 48 ) return false;
    };
    self.helperInput.dom.onchange = changeValue;
    self.helperInput.dom.onclick = changeValue;
    self.helperInput.dom.onkeyup = changeValue;
    self.setHelperValue(self.config.value);
    */
    return Ext.factory(config, Ext.slider.Slider);
  },
  


  ////////////////////////////////////////////////////////////////////////////
  onSliderChange: function(me, thumb, newValue, oldValue) {
    
    //this.setHelperValue(newValue);
    this.fireEvent('change', this, thumb, newValue, oldValue);
    
  },
  onSliderDragStart: function(me, thumb, newValue, oldValue) {
    
    //debugger;
    
    //var thumbTest = Ext.getCmp('ext-thumb-1');
    
    //this.stopSwipe();
    
    this.setIncrement(0);
    
    this.fireEvent('dragstart', this, thumb, newValue, oldValue);
    
  },
  onSliderDrag: function(me, thumb, newValue, oldValue) {
    //this.setHelperValue(newValue);
    this.fireEvent('drag', this, thumb, newValue, oldValue);
    
    //console.log('slider changed position: ' + newValue);
    this.parent.fireSliderEvent(this,newValue);
  },
  onSliderDragEnd: function(me, thumb, newValue, oldValue) {
    
     //console.log('drag end  position: ' + newValue); 
    
     this.fireEvent('dragend', this, thumb, newValue, oldValue);
     
     this.setIncrement(this.config.increment_special);
    
     //this.startSwipe();
    
  },
  ////////////////////////////////////////////////////////////////////////////




  /**
   * Convience method. Calls {@link #setValue}
   */
  setValues: function(value) {
    this.setValue(value);
  },


  /**
   * Convience method. Calls {@link #getValue}
   */
  getValues: function() {
    return this.getValue();
  },


  reset: function() {
    debugger;  
      
    var config = this.config,
      initialValue = (this.config.hasOwnProperty('values')) ? config.values : config.value;


    this.setValue(initialValue);
  },


  doSetDisabled: function(disabled) {
    this.callParent(arguments);


    this.getComponent().setDisabled(disabled);
  },
  //
  // --- To make sure the user can more easily select the thumb without dragging the carousel page
  //
  getThumbPos:function(){
    
    var thumb =  this.getComponent().getThumb();
    
    //return this.rectThumb;
  },
  intersectRect:function(r1, r2) {
 
  
    return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
  },
  //-------------------------------------------------
  stopSwipe:function(){
      //debugger;
      var carousel = this.up('carousel'),
       element  = carousel.element;


      element.un({
        dragstart : 'onDragStart',
        drag      : 'onDrag',
        dragend   : 'onDragEnd',
        scope     : carousel
    });
      
  },
  startSwipe:function(){
      
      var carousel = this.up('carousel'),
      element  = carousel.element;


      element.on({
        dragstart : 'onDragStart',
        drag      : 'onDrag',
        dragend   : 'onDragEnd',
        scope     : carousel
     });
      
  }
                 
  
  
  /*NOT USED CURRENTLY:*/
  /* 
  getElementConfig: function() {
    var self = this;
    var originalConfig = self.callParent();


    originalConfig.children[1].children = [{
      reference: 'helper',
      tag: 'div',
      cls: Ext.baseCSSPrefix + 'slider-helper',
      children: [
      {
        reference: 'helperInput',
        tag: 'input',
        type: 'number',
        cls: Ext.baseCSSPrefix + 'slider-helper-input'
      }
      ]
    }];


    return originalConfig;
  },*/
  
  
});

[bricemason]

Why have you created a custom slider by extending Ext.field.Field? I'm also having trouble understanding what custom behavior you're creating with this code.

You had mentioned that you did this so you could just drop it anywhere. What's more droppable than requiring the built-in slider and using:

{ xtype: 'sliderfield' }

Brice

[Mike6679]

I needed to override :

change: 'onSliderChange',
dragstart: 'onSliderDragStart',
drag: 'onSliderDrag',
dragend: 'onSliderDragEnd'

etc.... I downloaded the class from: here and it was the only example code I could find that provided an example on how to override slider events. Do you have a better example?

[bricemason]

Here is an example of extending the built-in Ext.field.Slider component:

Ext.define('MyApp.ux.SliderExtended', {
    extend: 'Ext.field.Slider',
    xtype: 'sliderextended',


    initialize: function() {
        this.callParent();


        // hook up listeners to do custom stuff
        this.on('change', 'onChange', this);
        this.on('dragstart', 'onDragStart', this);
        this.on('drag', 'ondrag', this);
        this.on('dragend', 'ondragend', this);
    },


    onChange: function(me, slider, thumb, newValue, oldValue, opt) {
        // do custom stuff on change
    }


    // ... define rest of handlers created in initialize ...
});

In the initialize method you can, among other things, define your own listeners to tack on custom behavior. If the link to the slider component you referenced earlier is much like you wish to implement with a couple of tweaks, then you should extend that class.

I hope this helps you.

Brice

[Mike6679]

Thanks I tried that. Same result. Hmmmmm.....

[bricemason]

If the same result you're referring to is the behavior of the slider in relation to the carousel on the iPad, please refer to my earlier post regarding rendering that slider as an item of Ext.form.FieldSet.

Like I said, the slider on its own seems finicky (at least on the testing I did with iPad and Nexus 10 tablets) but inside the FieldSet, it was better.

If your main concern is the slider inside a carousel I would focus first on getting the built-in controls to work as you'd expect. After that, work towards building your own components. Better to minimize the options for error.

Brice