erikeldridge/gist:596562

## gistfile1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"></script>
    <script type="text/javascript" src="http://isithackday.com/hacks/geo/yql-geo-library/yqlgeo.js"></script>

    <style type="text/css">
        #demo input {
            width: 2em;
        }
        .horiz_slider, .horiz_slider2 {
            margin-left: 1ex;
        }
    </style>

</head>
<body class="yui3-skin-sam  yui-skin-sam">


<ul id="results"></ul>

<div id="demo">

    <h4>Horizontal Slider</h4>
    <p>
        <label for="horiz_value">Value: </label>
            <input id="horiz_value" value="0">
        <span class="horiz_slider"></span>
    </p>

    <p>
        <label for="horiz_value2">Value: </label>
            <input id="horiz_value2" value="0">
        <span class="horiz_slider2"></span>
    </p>

</div>

<script type="text/javascript">
YUI().use("slider", function(Y) {

    var xInput, // input tied to xSlider
    yInput, // input tied to ySlider
    xSlider; // horizontal Slider

    // Function to pass input value back to the Slider
    function updateSlider(e) {
        var data = this.getData(),
            slider = data.slider,
            value = parseInt(this.get("value"), 10);

        if (data.wait) {
            data.wait.cancel();
        }

        // Update the Slider on a delay to allow time for typing
        data.wait = Y.later(200, slider, function() {
            data.wait = null;
            this.set("value", value);
        });
    }

    // Function to update the input value from the Slider value
    function updateInput(e) {
        this.set("value", e.newVal);
    }

    // Create a horizontal Slider using all defaults
    xSlider = new Y.Slider();

    // Link the input value to the Slider
    xInput = Y.one("#horiz_value");
    xInput.setData({
        slider: xSlider
    });

    // Pass the input as the 'this' object inside updateInput
    xSlider.after("valueChange", updateInput, xInput);
    xInput.on("keyup", updateSlider);

    // Render the Slider next to the input
    xSlider.render('.horiz_slider');


    var xSlider2 = new Y.Slider();

    // Link the input value to the Slider
    xInput2 = Y.one("#horiz_value2");
    xInput2.setData({
        slider: xSlider2
    });

    // Pass the input as the 'this' object inside updateInput
    xSlider2.after("valueChange", updateInput, xInput2);
    xInput2.on("keyup", updateSlider);

    // Render the Slider next to the input
    xSlider2.render('.horiz_slider2');

});

</script>

<script>
yqlgeo.get('visitor',function(o){
    console.log(o);
});
</script>


</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"></script>
	<script type="text/javascript" src="http://isithackday.com/hacks/geo/yql-geo-library/yqlgeo.js"></script>

	<style type="text/css">
	#demo input {
	width: 2em;
	}
	.horiz_slider, .horiz_slider2 {
	margin-left: 1ex;
	}
	</style>

	</head>
	<body class="yui3-skin-sam yui-skin-sam">


	<ul id="results"></ul>

	<div id="demo">

	<h4>Horizontal Slider</h4>
	<p>
	<label for="horiz_value">Value: </label>
	<input id="horiz_value" value="0">
	<span class="horiz_slider"></span>
	</p>

	<p>
	<label for="horiz_value2">Value: </label>
	<input id="horiz_value2" value="0">
	<span class="horiz_slider2"></span>
	</p>

	</div>

	<script type="text/javascript">
	YUI().use("slider", function(Y) {

	var xInput, // input tied to xSlider
	yInput, // input tied to ySlider
	xSlider; // horizontal Slider

	// Function to pass input value back to the Slider
	function updateSlider(e) {
	var data = this.getData(),
	slider = data.slider,
	value = parseInt(this.get("value"), 10);

	if (data.wait) {
	data.wait.cancel();
	}

	// Update the Slider on a delay to allow time for typing
	data.wait = Y.later(200, slider, function() {
	data.wait = null;
	this.set("value", value);
	});
	}

	// Function to update the input value from the Slider value
	function updateInput(e) {
	this.set("value", e.newVal);
	}

	// Create a horizontal Slider using all defaults
	xSlider = new Y.Slider();

	// Link the input value to the Slider
	xInput = Y.one("#horiz_value");
	xInput.setData({
	slider: xSlider
	});

	// Pass the input as the 'this' object inside updateInput
	xSlider.after("valueChange", updateInput, xInput);
	xInput.on("keyup", updateSlider);

	// Render the Slider next to the input
	xSlider.render('.horiz_slider');


	var xSlider2 = new Y.Slider();

	// Link the input value to the Slider
	xInput2 = Y.one("#horiz_value2");
	xInput2.setData({
	slider: xSlider2
	});

	// Pass the input as the 'this' object inside updateInput
	xSlider2.after("valueChange", updateInput, xInput2);
	xInput2.on("keyup", updateSlider);

	// Render the Slider next to the input
	xSlider2.render('.horiz_slider2');

	});

	</script>

	<script>
	yqlgeo.get('visitor',function(o){
	console.log(o);
	});
	</script>


	</body>
	</html>