JQuery Slider كيف يمكنني قفل مقبض في مكانه؟

Question

لدي منزلق jQuery مع مقابلين. أنا أتطلع إلى قفل الأول في مكانه بناءً على المقبض الثاني.

لقد حاولت التحقق من القيم على الانزلاق الحدث ثم تعيين المقبض الأول مرة أخرى إلى موضع القفل ولكنه يتجاهل بشكل أساسي ما قمت بتعيينه ويستمر في الانزلاق.

لقد حصلت عليه للعمل مع قف الحدث ولكنه clunky جدا.

أنا أستخدم كائن JSON الذي تم إنشاؤه من Serverside لإلغاء شرائح منزلي. هذا هو الكود الخاص بي لحدث التوقف:

   $(clientID).slider({
        range: true,
        max: slider.max,
        values: [slider.minVal, slider.maxVal],
        change: afterSliderChanged,
        stop: onSliderStop
    });

    function onSliderStop(event, ui) {
    for (i in sliders.sliders) {
        var slider = sliders.sliders[i];
        var clientID = slider.cellType + "_" + slider.objectID + "_null";

        if (this.id == clientID) {
            if (ui.values[0].toString() == slider.max.toString()) {
                var values = $(this).slider('option', 'values');
                $(this).slider('option', 'values', [parseInt(slider.max - 1), parseInt(values[1])]);
            }
        }
    }

هل لدي احد اى افكار؟

اسمحوا لي أن أعرف إذا كنت بحاجة إلى توضيح.

شكرًا! دانييل بروير

Answer 1

فيما يلي مثال سريع وقذر على كيفية قفل المقبض الآخر فيما يتعلق بالمقبض الذي يتم سحبه:

var offset = 40;
$('#slider').slider({
    range: true,
    max: 600,
    values: [40, 80],
    slide: function(e,ui){
        if (ui.value == ui.values[0]) {
            $(this).slider('values',1, ui.value+offset);
        } else {
            $(this).slider('values',0, ui.value-offset);
        }
    }
});

يجب أن يساعدك في معرفة كيفية القيام بما تريد القيام به.

مثال العمل: http://jsfiddle.net/cbhdd/

Answer 2

فيما يلي إصدار أقل قليلاً من n-dirty من @Petersendidit's JSFIDDLE ، أن الأقفال مقابض فيما يتعلق ببعضها البعض وأيضًا تشمل الإزاحة بينهما في نهايات المتزلجون ، لذلك لا يمكن أن ينهار النطاق أدناه maxOff. المفتاح هو return false, ، لمنع jquery-ui من تطبيق قيمة السحب الحالية:

var max = 600;
var maxOff = 40;

$('#slider').slider({
    range: true,
    max: max,
    values: [40, 80],
    slide: function(e,ui){
        if (ui.value == ui.values[0]) {
            $(this).slider( 'values', 1, ui.value+maxOff);
            if (ui.value >= max - maxOff) {
                $(this).slider( 'values', 0, max - maxOff);
                return false;
            }
        } else {
            $(this).slider( 'values',0, ui.value-maxOff);
            if (ui.value <= maxOff) {
                $(this).slider( 'values', 1, maxOff);
                return false;
            }
        }
    }
});

http://jsfiddle.net/tbwe5/