jquery multi handle slider

I want make a multi-handle slider and image hanging with each handle

by trivender

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="sliderImage"></div>
<img src="http://biinfotech.com/confirmit/Jobs/p229955019/products/153.jpg" />
<img src="http://biinfotech.com/confirmit/Jobs/p229955019/products/902.jpg" />
<img src="http://biinfotech.com/confirmit/Jobs/p229955019/products/902.jpg" />

CSS

#sliderPointer a {
    text-decoration: none;
}
#sliderPointer.ui-slider-horizontal {
    margin: auto;
    width: 500px;
}
#sliderPointer.ui-state-default, #sliderPointer.ui-widget-content .ui-state-default, #sliderPointer.ui-widget-header .ui-state-default {
    background: url("http://biinfotech.com/confirmit/jqueryplugin/imgslider/pointerhandle.png") repeat-x scroll 50% 50% #A0000B;
    color: #FFFFFF;
    text-align: center;
    width: 37px;
}
#sliderPointer.ui-widget-content {
    background: url("http://biinfotech.com/confirmit/jqueryplugin/imgslider/pointerslide.png") repeat-x scroll 50% 50% #E3E3E3;
}
#sliderImage.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 7.5em;
}
#sliderImage.ui-slider-horizontal {
    margin: 40px auto;
    width: 500px;
}

JavaScript

$(function () {
    var imgValues = [];
    $('img').each(function () {
        imgValues.push('0');
    });


    $("#sliderImage").slider({
        min: 0,
        max: 100,
        values: imgValues,
    });
    //following code to set clicked image with highest z-index		
    $("#sliderImage a.ui-slider-handle").on("mousedown", function () {
        var maxZindex = 20;
        $("#sliderImage a.ui-slider-handle").each(function () {
            var zIndex = $(this).css("z-index");
            if (zIndex > maxZindex) {
                maxZindex = zIndex;
            }
        });
        var maxZindexInt = Number(maxZindex) + 1;
        $(this).css('z-index', maxZindexInt);
        $("#pointer" + ($(this).attr('id').substring(5))).css('z-index', maxZindexInt);
    });

    //this is to assign Ids to pointer handle
    var indexPointer = 1;
    $("#sliderPointer a").each(function () {
        $(this).attr('id', 'pointer' + indexPointer);
        indexPointer++;
    });

    //this is to assign IDs to image handles and set z-index
    var zIndex = 20;
    var indexImage = 1;
    $("#sliderImage a").each(function () {
        $(this).attr('id', 'image' + indexImage).css('z-index', zIndex);
        $("#sliderPointer a").eq(indexImage - 1).css('z-index', zIndex);
        zIndex++;
        indexImage++;
    });

    //this is to set background image on image handles
    var $logos = $("img");
    for (var i = 0; i < $logos.length; i++) {
        var src = $logos.eq(i).attr("src");
        $("#image" + ($logos.length - i)).css("background", "url(" + src + ")");
    }
    $('img').hide();
});