的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"));  
});