用滑块移动更改滑块值

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/