HTML5 <input type ='range'>

Question

我正在使用html5 type ='range'滑塊，其中有3個。我的要求是這樣的，3個滑塊的總選擇的值不能去超過250
對於例如： slider1 = 100 slider2 = 100 slider3 = 50

和這些滑塊的總和不能越過250 （總和= 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