Question

I am having a problem with my slider values. I want var R, G and B to change with the sliders. At the moment they only change after I have stopped using the sliders. Any ideas?

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

Well, I’m going to assume that you’re using jQuery UI. If so, you just need to utilize the “slide” callback, rather than the empty functions you’re using right now.

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();

The fiddle, if you want it: http://jsfiddle.net/luhn/5b4Kc/