通过滑块移动更改滑块值答案

【问题标题】：Change slider values with slider movement通过滑块移动更改滑块值
【发布时间】：2012-04-27 08:00:05
【问题描述】：

我的滑块值有问题。我希望 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) {                    
}

});

【问题讨论】：

您需要告诉我们您的滑块使用的是什么。 jQuery 用户界面？

标签： javascript variables user-interface slider

【解决方案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/

【讨论】：