的Javascript滑块以更改变量动态

Question

我有什么事这么远了上codepen：

http://codepen.io/Shane24/pen/cEGsb

我需要当您移动滑块到变量保存出现在输入框的值。

任何帮助非常感谢。谢谢。

Answer 1

最简单的问题的答案是，你可以从滑块的处理

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; 
    } 

设置你的变量，但不知道你需要什么样的I whipped up an example that should show you a working example我来自哪里滑块提取值并将其应用到的颜色在画布上画圈。此代码与您最初发布的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"));  
});