javascript - Having issues integrating jsPlumb with my slider? -

i using minimalistic dragdealer.js library create slider looks following:

the red blobs have ids #drag-button, #drag-button2 , on.

when try connect first 2 red buttons adjoined using following code:

        jsplumb.ready(function() {              jsplumb.connect({ source:"drag-button", target: "drag-button2",                                   paintstyle:{ linewidth:4, strokestyle:'rgba(0, 0, 200, 0.5)' },                                     anchors:["center", "center"],                                     connector:"straight",                                     endpoint:[ "rectangle", { width:1, height:1 }]                             });             jsplumb.draggable("drag-button");             jsplumb.draggable("drag-button2");         }); 

the first 2 buttons not join. i however able drag line source, not able join other drag-button since seems have different z-index though changed this. here's i'm talking about, , there's css code under it:

#drag-button1{z-index:99;} #drag-button2{z-index:99;} #drag-button3{z-index:99;} ._jsplumb_hover{z-index:99;} 

i tried making jsfiddle unsuccessful since did not recognize jsplumb though pasted in javascript portion of it. can used refer dom still

jsplumb , dragdealer plugin don't seem go each other.

the news discussed slider functionality rebuildable plain jquery, don't need dragdealer libraries.

the following jsplumb/jquery code, combined little tweak in css, comes pretty close functionality want, guess:

jsplumb.ready(function() {    var showratio = function(left) {     var maxl = $(this).parent().width() - $(this).width();     var ratio = math.round(left / maxl * 100) / 100;     $(this).children().text(ratio);   };   // following 10 lines set initial values:   var maxwidth = $(".dragdealer").width() -  $(".handle").width();   var left = 0.3 * maxwidth;   $("#my-slider .handle").css({left: left});   showratio.call($("#my-slider .handle")[0], left);   left = 0.4 * maxwidth;   $("#my-slider2 .handle").css({left: left});   showratio.call($("#my-slider2 .handle")[0], left);   left = 0.7 * maxwidth;   $("#my-slider3 .handle").css({left: left});   showratio.call($("#my-slider3 .handle")[0], left);    // jsplumb connections , dragging:   jsplumb.connect({      source: $("#my-slider .handle"),     target: $("#my-slider2 .handle"),     connector:["bezier", { curviness:70 }],     cssclass:"c1",     endpoint:"blank",     anchors:["bottomcenter", "topcenter"],     paintstyle:{ linewidth:4, strokestyle:'rgba(0, 0, 200, 0.5)' }   });   jsplumb.connect({      source: $("#my-slider2 .handle"),     target: $("#my-slider3 .handle"),     connector:["bezier", { curviness:70 }],     cssclass:"c1",     endpoint:"blank",     anchors:["bottomcenter", "topcenter"],     paintstyle:{ linewidth:4, strokestyle:'rgba(0, 200, 0, 0.5)' }   });    var dragoptions = {     axis: "x",     containment: "parent",     drag: function( event, ui ) {       var left = ui.position.left;       showratio.call(this, left);     }   };   jsplumb.draggable($("#my-slider .handle"), dragoptions);   jsplumb.draggable($("#my-slider2 .handle"), dragoptions);   jsplumb.draggable($("#my-slider3 .handle"), dragoptions); }); 

here jsbin fiddle i've created