スライダの移動でスライダの値を変更する

Question

スライダの値に問題があります。私はvar R、GとBスライダーで変更します。現時点では、私はスライダーの使用をやめた後にのみ変更します。何か案は？

var R = $("#RSlider").slider('value'); 
var G = $("#GSlider").slider('value'); 
var B = $("#BSlider").slider('value'); 

var colour = R + 256 * G + 65536 * B; 
document.getElementById('color').innerHTML = colour.toString(16); 

$("#BSlider").slider({ 
value: props["col1"].toFixed(2).replace('-',''), 
step: 5, 
min: 100, 
max: 255, 
slide: function(event, ui) { 
} 
}); 

$("#GSlider").slider({ 
value: props["col2"].toFixed(2).replace('-',''), 
step: 5, 
min: 100, 
max: 255, 
slide: function(event, ui) { 
} 
}); 

$("#RSlider").slider({ 
    value: props["col3"].toFixed(2).replace('-',''), 
step: 5, 
min: 100, 
max: 255, 
slide: function(event, ui) {      
} 

}）;

Answer 1

さて、私はあなたがjQuery UIを使用していると仮定します。もしそうなら、今使っている空の関数ではなく、単に "スライド"コールバックを利用するだけです。

function print_color() { 
    var R = $("#RSlider").slider('value'); 
    var G = $("#GSlider").slider('value'); 
    var B = $("#BSlider").slider('value'); 

    var colour = R + 256 * G + 65536 * B; 
    //document.getElementById('color').innerHTML = colour.toString(16); 
    $('#color').html(colour.toString(16)); 
} 

$("#BSlider").slider({ 
    //These are giving me errors and I'm not sure what they do, so I'm commenting them out. 
    //value: props["col1"].toFixed(2).replace('-', ''), 
    step: 5, 
    min: 100, 
    max: 255, 
    slide: print_color 
}); 

$("#GSlider").slider({ 
    //value: props["col2"].toFixed(2).replace('-', ''), 
    step: 5, 
    min: 100, 
    max: 255, 
    slide: print_color 
}); 

$("#RSlider").slider({ 
    //value: props["col3"].toFixed(2).replace('-', ''), 
    step: 5, 
    min: 100, 
    max: 255, 
    slide: print_color 
}); 

print_color(); 

フィドルは、あなたがそれをしたい場合：http://jsfiddle.net/luhn/5b4Kc/