Изменение значений ползунка при перемещении ползунка

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. Если это так, вам просто нужно использовать обратный вызов «слайд», а не пустые функции, которые вы используете прямо сейчас.

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/