HTML5 <input type =“range”/>

Question

我使用的是html5 type ='range'滑块，其中有3个。我的要求是，3个滑块的总选定值不得超过250 例如： slider1 = 100 slider2 = 100 slider3 = 50

这些滑块的总和不得超过250（sum = 100 + 100 + 50），这在上例中是正确的。

粘贴下面的小提琴链接。另请在Chrome浏览器中打开小提琴链接。

function updateSlider(obj){

    id = obj.id;
    sum = sum123();

    if(sum>250){

        alert('Max reached');
        return false;
    }
    document.getElementById('span'+id).innerHTML = obj.value 
}
function sum123(){
    var i = parseInt(document.getElementById('slide').value);
    var j = parseInt(document.getElementById('slide1').value);
    var k = parseInt(document.getElementById('slide2').value);
    var sum = i+j+k;
    if(sum>250){
        arr['i'] = i;
        arr['j'] = j;
        arr['k'] = k;
    }
    return i+j+k;
}

http://jsfiddle.net/kapilgopinath/2yLuj/4/

Answer 1

基本上您需要做的是检查输入，如果总值超过250，请将已更新的输入设置为安全值，如下所示：

function updateSlider(obj){

    var id = obj.id;
    var sum = sum123();
    var oldValue = parseInt(obj.value);

    if(sum>250){
        //alert('Max reached');
        obj.value = 250 - sum + oldValue;
    }
    document.getElementById('span'+id).innerHTML = obj.value 
}

Fiddle