reid · September 25, 2010 00:56
diff --git a/slider-horizontal.html b/slider-horizontal.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>

 <script 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;
    }
    .vert_slider {
        margin-bottom: 1em;
    }
 </style>

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

 </head>

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

 <h1>Basic Sliders</h1>

 <div class="exampleIntro">
 	<p>This example walks you through the basics of creating a Slider from script.
 Both Sliders in this example link to text input fields that expect numeric input.  The first Slider uses the default configuration, spanning values between 0 and 100, and is rendered inline.</p>

 <p>The second Slider is configured to orient vertically (along the y axis) and the configuration includes minimum, maximium, and initial values.  It is rendered into a <code>&lt;div&gt;</code>.</p>

 <p>The first Slider is set up in a more traditional JavaScript coding style and
 the second using the shorter, method chaining style.</p>
 			
 </div>

 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

 <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">
 // Create a YUI instance and request the slider module and its dependencies
 YUI().use("slider", function (Y) {

 var xInput,  // input tied to xSlider
    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>

 <!--END SOURCE CODE FOR EXAMPLE =============================== -->

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

	<script 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;
	}
	.vert_slider {
	margin-bottom: 1em;
	}
	</style>

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

	</head>

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

	<h1>Basic Sliders</h1>

	<div class="exampleIntro">
	<p>This example walks you through the basics of creating a Slider from script.
	Both Sliders in this example link to text input fields that expect numeric input. The first Slider uses the default configuration, spanning values between 0 and 100, and is rendered inline.</p>

	<p>The second Slider is configured to orient vertically (along the y axis) and the configuration includes minimum, maximium, and initial values. It is rendered into a <code><div></code>.</p>

	<p>The first Slider is set up in a more traditional JavaScript coding style and
	the second using the shorter, method chaining style.</p>

	</div>

	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<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">
	// Create a YUI instance and request the slider module and its dependencies
	YUI().use("slider", function (Y) {

	var xInput, // input tied to xSlider
	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>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	</body>
	</html>
No results found