ion Range Slider : How to determine which handle has changed

Question

Hi I am using I IonRangeSlider ( version 2.0.6) and would like to know which handle is been dragged in other to perform a audio seek on that information. Currently this code does not help.

          $('#scrubber').ionRangeSlider( {
                min: 0,
                max: 50,
                from: 10,
                to: 20,
                type: 'double',

                keyboard: false,

                onChange: function ( e ) {


                    var start = e.from,
                        end = e.to;

                            /*Bug here*/
                    audio.currentTime = start;  

                    audio.currentTime = end;







                }

            } );

The onChange method does not help since this does not provide information on whether the left (start ) or right (end ) handle is currently being dragged. it initiates as long as there is a change in value What I would want to have is some like.

     /* start */
onLeftHandleChange:function(start){

audio.currentTime = start;
}

/* end */

onRightHandleChange: function(end){ 

audio.currentTime = end
}


/*----------------------------------------------------------------*/

                            OR

/*--------------------------------------------------------------*/



if(start value changes){
audio.currentTime = start
}

if(end value changes) {
audio.currentTime  = end
}

I have read the documentation and cant seem to find any method that does this.

The dom element updates the slider (.irs-from) and (.irs-to) respectively without having to update all of them at once thereby giving me hope

Any help or a different plugin would be much appreciated.I have already used dxRangeSlider and it also has the same problem

score 0 · Answer 1 · answered May 01 '15 at 01:37

The trick is to download livequery plugin (https://plugins.jquery.com/livequery/) which detect elements when they appear on in the dom and listen for changes to the following two span elements with css classes (.irs-from) and (.irs-to). These classes are inserted by the ion Slider plugin. There is no need for for the Onchange Event for this purpose.

         $( '.irs-from' ).livequery( function () {

                $( '.irs-from' ).bind( 'DOMSubtreeModified', function () {

                    /* when left handle  is being dragged */

                    console.log( 'LEFT VALUE ' + $( this ).html() );
                } );
            } );



            $( '.irs-to' ).livequery( function () {

                $( '.irs-to' ).bind( 'DOMSubtreeModified', function () {

                /* when right handle is dragged */

                    console.log( 'RIGHT VALUE' + $( this ).html() );
                } );
            } );

ion Range Slider : How to determine which handle has changed

1 Answers1