jQuery UI-Slider 没有 'live' 效果和 CSS 样式

Question

基本上这里有几个问题，因为下面显示的 ui-slider ucas 点数和等级不是“实时”的，我希望它们在使用 slider 时显示。所以所有的计算都是立即发生的，所以当你滑动时它们会改变，而不是当用户停止时。

此外，我将如何设置条形样式，以便随着条形向上移动，已滑动的位会变成某种颜色。

对于实时版本:http://universitycompare.com

我的 slider 的 jQuery 可以在下面看到:

jQuery(document).ready(function($) {

    var slider1 = $("#slider").slider({
        max: 420,
        min: 0,
        step: 20,
        change: function(event, ui) {
            $("#s2").html(ui.value);    
            $("#s2")
        },
        stop:Calculate
    });

    var slider2 = $("#slider2").slider({
        max: 420,
        min: 0,
        step: 20,
        change: function(event, ui) {
            $("#s3").html(ui.value);    
            $("#s3")
        },
        stop:Calculate

    });

    var div = $('#s4'); //cache this object in a variable if you'll be using it multiple times
    slide: function Calculate(){
        var val1 = slider1.slider('option', 'value');
        var val2 = slider2.slider('option', 'value');

        var finalVal = (val1 + val2) / 2;
        //update the ui
            if (finalVal === 0) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 20) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 40) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 60) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 80) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 100) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 120) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('EEE');
            }

            if (finalVal === 140) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DEE');
            }

            if (finalVal === 160) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DDE');
            }

            if (finalVal === 180) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DDD');
            }

            if (finalVal === 200) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CDD');
            }

            if (finalVal === 220) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CCD');
            }

            if (finalVal === 240) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CCC');
            }

             if (finalVal === 260) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BCC');
            }

             if (finalVal === 280) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BBC');
            }

            if (finalVal === 300) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BBB');
            }

            if (finalVal === 320) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('ABB');
            }

            if (finalVal === 340) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('AAB');
            }

            if (finalVal === 360) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('AAA');
            }

            if (finalVal === 380) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*AA');
            }

            if (finalVal === 400) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*A*A');
            }

            if (finalVal === 420) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*A*A*');
            }

    }
});

slider 的 CSS 也在这里，但似乎没有改变颜色:

/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; background-color:#ffdd4e; height:7px; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: 7px; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; background-color:#ffdd4e; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-widget-header { background-color:#0071bc !important; height:8px !important; left:1px !important; top:1px !important; position:absolute !important; }

Answer 1

试试这个 jsFiddle example .

我为您的两个 slider 添加了对 slider 滑动事件的计算函数的调用。

slide: Calculate,

更新:

要显示 slider 值，请改用它:

slide: function(event, ui) {
    Calculate();
    $("#s2").html(ui.value);
},

jsFiddle example

请注意，在这个 fiddle 中，我更改了您的 CSS 以使值可见(例如，您有白色的白色)。