到目前为止,我在 codepen 上得到了什么:
http://codepen.io/Shane24/pen/cEGsb
当您将滑块移动到变量中时,我需要保存出现在输入框中的值。
非常感谢任何帮助。谢谢。
到目前为止,我在 codepen 上得到了什么:
http://codepen.io/Shane24/pen/cEGsb
当您将滑块移动到变量中时,我需要保存出现在输入框中的值。
非常感谢任何帮助。谢谢。
该问题的最简单答案是您可以从滑块的处理程序中设置变量
slide: function( event, ui ) {
$('amount1').val( ui.value );
// This is the value that you just dragged the slider to, there it is,
// in a variable
x = ui.value;
}
在不知道您需要什么的情况下,我创建了一个示例,该示例应该向您展示一个工作示例,其中我从滑块中提取值并将其应用于画布中圆圈的颜色。此代码适用于您最初发布的 HTML
function drawOnCanvas () {
var rgb =[
$('#slider-1').slider("value"),
$('#slider-2').slider("value"),
$('#slider-3').slider("value")
];
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
var color = "rgb("+ rgb.join(',') + ")" ;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function createSlider(slider, boundTextField) {
slider.slider({
orientation: "vertical",
range: "min",
min: 0,
max: 255,
value: 0,
slide: function( event, ui ) {
boundTextField.val( ui.value );
drawOnCanvas();
}
})
}
$(function() {
createSlider($( "#slider-1" ), $( "#amount1" ));
createSlider($( "#slider-2" ), $( "#amount2" ));
createSlider($( "#slider-3" ), $( "#amount3" ));
});