El control de un Processing.js Bosquejo w / un control deslizante jQuery

Question

He tenido un poco de suerte el control Processing.js bocetos utilizando elementos de formulario HTML y le gustaría utilizar un control deslizante jQuery para hacer lo mismo.

<script>
$(function() {
    $( "#slider-range-min" ).slider({
        range: "min",
        value: 37,
        min: 1,
        max: 700,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>

<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>

<div id="slider-range-min"></div>

Creo que mi principal problema es que no entiendo por completo la función de control deslizante, cómo hacer referencia a su valor dentro del boceto, o cómo hacer referencia al window.processing.Data = {}; variable dentro de la barra deslizante.

Cualquier y toda ayuda es apreciada.

Answer 1

Nunca he usado deslizador de jQuery-UI antes, así que no estoy seguro de si su uso correcto de ellos. Pero usted puede fácilmente comunicarse entre el procesamiento de código y el código JavaScript mediante la colocación de una variable en el objeto ventana:

1) window.communicate = {}

2) variables de almacenar en ese objeto: window.communicate.myVar

3) alterar las variables en javascript:

// inside jquery-ui callback
window.communicate.myVar = ui.value;

4) leer las variables en el procesamiento

He creado aa demostración para usted en jsFiddle: http://jsfiddle.net/Zevan/Rms2N/ 2 /

Actualizar

Así que en su función de diapositiva que se puede establecer una variable en el objeto comunicar:

slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
    window.communicate.value = ui.value;
}

A continuación, puede utilizar "window.communicate.value" cualquier parte del código Processing.js.

Answer 2

Esta es una demostración de trabajo si ayuda:

http://matrix.senecac.on.ca /~asalga/FSOSS2010/jQueryUI/jquery-test.html