javascript - 変数を動的に変更する 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;
  }

何が必要かわからないまま、スライダーから値を抽出してキャンバスの円の色に適用する実際の例を示す例を作成しました。このコードは、最初に投稿した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" ));    
});