If you want to know how to create the slider widget as well as understand its commonly used options, methods, and events. You have came to the right place

This widget is used to select a numeric value by dragging a handle. The following is the syntax for creating the slider widget:
$(selector).slider()

$(selector).slider(options)

An <div> element can be specified as a slider widget. A handle on the widget can be moved to increment or decrement the value.

FOUR STEPS TO BUILD JQUERY SLIDER WIDGET :

1. Add jquery-ui css cdn to the html document
2. Add to the jquery cdn to the html document
3. Add to the jquery ui js cdn to the html document
4. Make file named "slider..html" with given code.

STEP ONE: Add jquery-ui css cdn to the html document

STEP TWO: Add to the jquery cdn to the html document

STEP THREE: Add to the jquery ui js cdn to the html document

STEP FOUR: Make file named "slider.html" with given code.

<!DOCTYPE html>
<html lang="en">
 <head>   
   <meta charset="utf-8"> 
     <link rel="stylesheet" href="styles/jquery-ui.min.css"> 
     <script src="scripts/jquery-2.1.0.min.js"></script>      
<script src="scripts/jquery-ui.min.js"></script>          
 <style>       #txtAge { width:50px; }      </style> 

<style>       #salary { width: 300px; margin: 15px; }      </style> 

<script>       $(function() {             
$("#salary").slider(              {                    min: 50000,                    max: 200000,                    step: 2000,                    slide: function(eventObj, uiWidget) {                          $("#selectedValue").text("$" + uiWidget.value);                    }  
            }); 

$("#salary").slider("value", 76000); 

$("#selectedValue").text("$" + $("#salary").slider("value"));       }); 
     </script>
 </head>



<body>  
    <div class="ui-widget"> 
      Salary: <div id="salary" value="50000"></div> 
      <div id="selectedValue"></div>      </div> 
</body> 
</html>

EXAMPLE :

Salary:

How It Works
Within the document ready function of this example, the slider() method sets the div element—with the ID set to salary —as a slider widget. The options used in this example are min and max, which specify the range of values that can be selected using this widget.step—Specifies the amount of increment or decrement associated with each handle drag.During the creation of the widget, a slide event callback function is also specified. The slide event is triggered when the user slides the handle. The slide callback function displays the current value of the widget by setting the text of the div element. The $("#salary").slider("value", 76000) sets the value of the slider widget to 76000. $("#selectedValue").text("$" + $("#salary").slider("value")) displays the current value of the widget by setting the text of the div element.

The other commonly used options for the slider widget are:

orientation—Specifies if the handle is moved horizontally or vertically. Valid values for this option are horizontal and vertical. The default value is horizontal. If you are setting the orientation to vertical, you also need to set the width style in the <div> tag to:
<div id="myId" style="width:13px"></div>
•฀ range—If set to true, instead of one value, two values (the range’s start value and end value) can be selected by using two handles. If it is set to min, the slider widget is highlighted from the “min” value to the handle position. If it is set to max, the slider widget is highlighted from the “max” value to the handle position. The default value is false. The following is an example of setting the slider widget using the range:
$( "#salaryRange" ).slider({ range: true, min: 50000, max: 200000, values: [ 60000, 80000 ] // Default values });
CHAPTER 10 ■ JQUERY UI
332
•฀ value—Sets the value of the widget. •฀ values—This is valid if the range is set to true. The format to set the start and end values of the widget is:
values: [startValue, endValue]

The commonly used events for the slider widget are:
slide—Triggered when the widget’s value is incremented or decremented. ui.value contains the new value. If the callback function returns false, the value of the widget is not changed. •฀ change—Triggered when the value of the widget changes.

The commonly used methods for the slider widget are:
value()—Gets the current value of the slider widget. •฀ value(newValue)—Sets the value of the slider widget with the specified newValue. •฀ values()—Gets the value of all handles. It returns an array of numbers. •฀ values(indexNumber)—Gets the value of the handle at the specified indexNumber. •฀ values(indexNumber, newValue)—Sets the value of the handle with the specified newValue at the specified indexNumber. •฀ values(newValues)—Sets the values of all handles from the specified newValues array.

The CSS classes specific to the slider widget are:

ui-slider—Used for the track of the slider widget. •฀ ui-slider-horizontal—Used for the slider widget if the orientation is horizontal. •฀ ui-slider-vertical—Used for the slider widget if the orientation is vertical. •฀ ui-slider-handle—Used for the slider’s handle(s). •฀ ui-slider-handle-range—Used for the range between slider’s handles. •฀ ui-slider-handle-min—Used for the range between the slider’s minimum value and the handle’s position. •฀ ui-slider-handle-max—Used for the range between the handle’s position and the slider’s maximum value.

No comments:

Post a Comment