jQuery UI Slider- What is the html object that moves a handle to that location on click?

Question

I am implementing jQuery ui slider like so: My Fiddle

I am curious what is the html object/element that is calling some function to move a slider handle to the clicked location, on click (obviously). ALSO, what does that click function actually look like? Does anybody know? If someone can provide this info for me, that would be great.

The change option/function I use below creates a new handle anytime you click on the slider, or slide a handle. How can I disable the default clicking on slider behavior. I only want to add a handle when the slider is clicked. NOTE* I cant get the add behavior to work in the fiddle but it works on my page with the exact code in the fiddle.

$(".pct-slider#" + sliders[1])
.customSlider({
    min: 0,
    max: 1440,
    step: 15,
    range: false,
    ticks: true,
    values: initialValues,
    create: function (event, ui) {
        $.each( initialValues, function(i, v){
            updateValue({
                value: v,
                handle: $(".pct-slider#" + sliders[1]).find('.ui-slider-handle').eq(i) 
            });
        });
    },
    change: function(event, ui) {
     var last = $($(".pct-slider#" + sliders[1]).customSlider('values')).last()[0]
        $(".pct-slider#" + sliders[1]).customSlider('addValue', last + 15)
    },
    slide: function (event, ui) {
        resize_colors(sliders[1]);
        var handleIndex = $('a', event.target).index(ui.handle),
            curr = ui.values[handleIndex],
            next = ui.values[handleIndex + 1] - 15,
            prev = ui.values[handleIndex - 1] + 15;

        if (curr > next || curr < prev) {
            return false;
        }

        updateValue(ui);
        //positionSelects();
    },
    stop: function(event, ui){
        resize_colors(sliders[1]);
    }  
});