$(function() {
    var total = 20;
    for (var i = 0; i < total; i++) {
        var name = "#slider" + i;
        if ($(name).length > 0) {
            $(name).slider({orientation:"vertical", change:handleChange, slide:handleSlide, min:-100, max:0});
        }
    }
});

function handleChange(e, ui) {
    var target = $(this).parent().children(".subject-list");
    var maxScroll = target.attr("scrollHeight") - $(this).parent().height();
    if (maxScroll > 0) {
        target.animate({ scrollTop: ui.value * (maxScroll / 100) - 10}, 1000);
    }
}

function handleSlide(e, ui) {
    var target = $(this).parent().children(".subject-list");
    var maxScroll = target.attr("scrollHeight") - $(this).parent().height();
    if (maxScroll > 0) {
        target.css("top", ui.value * (maxScroll / 100) - 10);
    }
}