用滑块移动更改滑块值
问题描述:
我的滑块值有问题。我想让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 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/
+0
干杯:)工作桃子 – 2012-04-27 12:20:10
您的需要告诉我们您正在使用的为您的滑块。 jQuery UI? – 2012-04-26 23:48:08