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.
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 `
The first Slider is set up in a more traditional JavaScript coding style and the second using the shorter, method chaining style.
{{>slider-basic-html}}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.
``` var xSlider = new Y.Slider(); // render into the next to the input xSlider.render( ".horiz_slider" ); ```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`.
``` // Function to update the input value from the Slider value function updateInput( e ) { this.set( "value", e.newVal ); } var xInput = Y.one( "#horiz_value" ); // Subscribe to the Slider's valueChange event, passing the input as the 'this' xSlider.after( "valueChange", updateInput, xInput ); ```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.
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.
``` // 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 ); } ); } xInput.setData( { slider: xSlider } ); xInput.on( "keyup", updateSlider ); ```To create a vertical Slider you just need to set the `axis` attribute to "y".
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.
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`.
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).
Finally, the `valueChange` subscription is included in the configuration as well.
``` var yInput = Y.one( "#vert_value" ); yInput.setData( "slider", new Y.Slider({ axis: 'y', min : 100, // min is the value at the top max : -100, // max is the value at the bottom value : 30, // initial value length: '201px', // rail extended to afford all values // construction-time event subscription after : { valueChange: Y.bind( updateInput, yInput ) } }).render( ".vert_slider" ) // render returns the Slider ) // set( "data", ... ) returns the Node .on( "keyup", updateSlider ); // chain the keyup subscription ```