erikeldridge/gist:595988

## gistfile1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Sliders</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #demo input {
        width: 2em;
    }
    .horiz_slider {
        margin-left: 1ex;
    }
</style>

<!--end custom header content for this example-->

</head>

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

Basic horizontal slider example<br/>
Adapted from <a href="http://developer.yahoo.com/yui/3/examples/slider/slider_basic.html">http://developer.yahoo.com/yui/3/examples/slider/slider_basic.html</a>

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

</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');

    });
</script>

</body>
</html>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Basic Sliders</title>

	<style type="text/css">
	/*margin and padding on body element
	can introduce errors in determining
	element position and are not recommended;
	we turn them off as a foundation for YUI
	CSS treatments. */
	body {
	margin:0;
	padding:0;
	}
	</style>

	<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>


	<!--begin custom header content for this example-->
	<style type="text/css">
	#demo input {
	width: 2em;
	}
	.horiz_slider {
	margin-left: 1ex;
	}
	</style>

	<!--end custom header content for this example-->

	</head>

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

	Basic horizontal slider example<br/>
	Adapted from <a href="http://developer.yahoo.com/yui/3/examples/slider/slider_basic.html">http://developer.yahoo.com/yui/3/examples/slider/slider_basic.html</a>

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

	</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');

	});
	</script>

	</body>
	</html>