7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<style scoped>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly #demo input {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly .horiz_slider {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly margin-left: 1ex;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly .vert_slider {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly margin-bottom: 1em;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div class="intro">
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <p>This example walks you through the basics of creating a Slider from script.
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly 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>
796e3dbd38977e1bcaade8112313d406d40f2e81Eric Ferraiuolo <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 `</div>`.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <p>The first Slider is set up in a more traditional JavaScript coding style and
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly the second using the shorter, method chaining style.</p>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-basic-html}}
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-basic-js}}
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Horizontal Slider with default configuration</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>Sliders are horizontal by default, with available values ranging from 0 to 100, and an initial value of 0. The rail is 150 pixels long plus a few pixels for the rail's end caps.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvar xSlider = new Y.Slider();
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// render into the <span> next to the input
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny DonnellyxSlider.render( ".horiz_slider" );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Linking a Slider with a text input</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>To keep the Slider's value and input value in sync, you need to subscribe to events on both the input and the Slider. For Slider-to-input, the interesting event is `valueChange`.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Function to update the input value from the Slider value
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyfunction updateInput( e ) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvar xInput = Y.one( "#horiz_value" );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Subscribe to the Slider's valueChange event, passing the input as the 'this'
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny DonnellyxSlider.on( "valueChange", updateInput, xInput );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Linking the input with the Slider</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>To feed input changes back to the Slider we'll listen to its `keyup` event. But we'll put the update on a delay to allow for a user to finish typing.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>Additionally, we'll make the update function generic, since we have two Sliders in this example. We'll leverage the `setData` and `getData` methods of Node instances and store a reference to the Slider. Then we can use this object from inside the function to get back to the slider the input is related to.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Function to pass input value back to the Slider
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyfunction updateSlider( e ) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly value = parseInt( this.get( "value" ), 10 );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly // Update the Slider on a delay to allow time for typing
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly data.wait = Y.later( 200, slider, function () {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly this.set( "value", value );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny DonnellyxInput.setData( { slider: xSlider } );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny DonnellyxInput.on( "keyup", updateSlider );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Creating the vertical Slider</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>To create a vertical Slider you just need to set the `axis` attribute to "y".</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>For this Slider, we'll use more extensive method chaining and include value and rail configurations. First we'll change the value range from 0 - 100 to -100 - +100 and set an initial value of +30.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>Note that the `min` configuration is 100 in this case because the top is associated with the minimum value. Slider has no qualms about `min` being greater than `max`.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>The rail length is then configured to be 201 pixels, so each value has a distinct pixel position on the rail (don't forget 0).</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>Finally, the `valueChange` subscription is included in the configuration as well.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvar yInput = Y.one( "#vert_value" );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly min : 100, // min is the value at the top
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly max : -100, // max is the value at the bottom
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly value : 30, // initial value
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly length: '201px', // rail extended to afford all values
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly // construction-time event subscription
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly valueChange: Y.bind( updateInput, yInput )
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly }).render( ".vert_slider" ) // render returns the Slider
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly ) // set( "data", ... ) returns the Node
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly .on( "keyup", updateSlider ); // chain the keyup subscription
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Full Code Listing</h3>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith<h4>HTML</h4>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith<!-- Add the yui3-skin-sam class to a containing element to apply the default skin -->
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-basic-html}}
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith<h4>JavaScript</h4>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-basic-js}}