[Summary view] [Print] [Text view]

   1  
   2  <ul class="UIAPIPlugin-toc">
   3  <li><a href="#overview">Overview</a></li>
   4  <li><a href="#options">Options</a></li>
   5  <li><a href="#events">Events</a></li>
   6  <li><a href="#methods">Methods</a></li>
   7  <li><a href="#theming">Theming</a></li>
   8  </ul>
   9  <div class="UIAPIPlugin">
  10    <h1>jQuery UI Slider</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          <p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.</p>
  15  <p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):
  16  </p>
  17  <ul>
  18    <li><b>ui.handle</b>: DOMElement - the current focused handle
  19    <li><b>ui.value</b>: Integer - the current handle's value
  20  </ul>
  21      </div>
  22      <div id="overview-dependencies">
  23          <h3>Dependencies</h3>
  24          <ul>
  25  <li>UI Core</li>
  26  </ul>
  27      </div>
  28      <div id="overview-example">
  29          <h3>Example</h3>
  30          <div id="overview-example" class="example">
  31  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  32  <p><div id="demo" class="tabs-container" rel="">
  33  A simple jQuery UI Slider.<br />
  34  </p>
  35  <pre>$(&quot;#slider&quot;).slider();
  36  </pre>
  37  <p></div><div id="source" class="tabs-container">
  38  </p>
  39  <pre>&lt;!DOCTYPE html&gt;
  40  &lt;html&gt;
  41  &lt;head&gt;
  42    &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  43    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  44    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  45    &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  46  &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  47    &lt;style type=&quot;text/css&quot;&gt;
  48      #slider { margin: 10px; }
  49    &lt;/style&gt;
  50    &lt;script&gt;
  51    $(document).ready(function() {
  52      $(&quot;#slider&quot;).slider();
  53    });
  54    &lt;/script&gt;
  55  &lt;/head&gt;
  56  &lt;body style="font-size:62.5%;"&gt;
  57    
  58  &lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;
  59  
  60  &lt;/body&gt;
  61  &lt;/html&gt;
  62  </pre>
  63  <p></div>
  64  </p><p></div>
  65      </div>
  66    </div>
  67    <div id="options">
  68      <h2 class="top-header">Options</h2>
  69      <ul class="options-list">
  70        
  71  <li class="option" id="option-disabled">
  72    <div class="option-header">
  73      <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
  74      <dl>
  75        <dt class="option-type-label">Type:</dt>
  76          <dd class="option-type">Boolean</dd>
  77        
  78        <dt class="option-default-label">Default:</dt>
  79          <dd class="option-default">false</dd>
  80        
  81      </dl>
  82    </div>
  83    <div class="option-description">
  84      <p>Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.</p>
  85    </div>
  86    <div class="option-examples">
  87      <h4>Code examples</h4>
  88      <dl class="option-examples-list">
  89      
  90  <dt>
  91    Initialize a slider with the <code>disabled</code> option specified.
  92  </dt>
  93  <dd>
  94  <pre><code>$( ".selector" ).slider({ disabled: true });</code></pre>
  95  </dd>
  96  
  97      
  98  <dt>
  99    Get or set the <code>disabled</code> option, after init.
 100  </dt>
 101  <dd>
 102  <pre><code>//getter
 103  var disabled = $( ".selector" ).slider( "option", "disabled" );
 104  //setter
 105  $( ".selector" ).slider( "option", "disabled", true );</code></pre>
 106  </dd>
 107  
 108      </dl>
 109    </div>
 110  </li>
 111  
 112  
 113  <li class="option" id="option-animate">
 114    <div class="option-header">
 115      <h3 class="option-name"><a href="#option-animate">animate</a></h3>
 116      <dl>
 117        <dt class="option-type-label">Type:</dt>
 118          <dd class="option-type">Boolean, String, Number</dd>
 119        
 120        <dt class="option-default-label">Default:</dt>
 121          <dd class="option-default">false</dd>
 122        
 123      </dl>
 124    </div>
 125    <div class="option-description">
 126      <p>Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
 127    </div>
 128    <div class="option-examples">
 129      <h4>Code examples</h4>
 130      <dl class="option-examples-list">
 131      
 132  <dt>
 133    Initialize a slider with the <code>animate</code> option specified.
 134  </dt>
 135  <dd>
 136  <pre><code>$( ".selector" ).slider({ animate: true });</code></pre>
 137  </dd>
 138  
 139      
 140  <dt>
 141    Get or set the <code>animate</code> option, after init.
 142  </dt>
 143  <dd>
 144  <pre><code>//getter
 145  var animate = $( ".selector" ).slider( "option", "animate" );
 146  //setter
 147  $( ".selector" ).slider( "option", "animate", true );</code></pre>
 148  </dd>
 149  
 150      </dl>
 151    </div>
 152  </li>
 153  
 154  
 155  <li class="option" id="option-max">
 156    <div class="option-header">
 157      <h3 class="option-name"><a href="#option-max">max</a></h3>
 158      <dl>
 159        <dt class="option-type-label">Type:</dt>
 160          <dd class="option-type">Number</dd>
 161        
 162        <dt class="option-default-label">Default:</dt>
 163          <dd class="option-default">100</dd>
 164        
 165      </dl>
 166    </div>
 167    <div class="option-description">
 168      <p>The maximum value of the slider.</p>
 169    </div>
 170    <div class="option-examples">
 171      <h4>Code examples</h4>
 172      <dl class="option-examples-list">
 173      
 174  <dt>
 175    Initialize a slider with the <code>max</code> option specified.
 176  </dt>
 177  <dd>
 178  <pre><code>$( ".selector" ).slider({ max: 7 });</code></pre>
 179  </dd>
 180  
 181      
 182  <dt>
 183    Get or set the <code>max</code> option, after init.
 184  </dt>
 185  <dd>
 186  <pre><code>//getter
 187  var max = $( ".selector" ).slider( "option", "max" );
 188  //setter
 189  $( ".selector" ).slider( "option", "max", 7 );</code></pre>
 190  </dd>
 191  
 192      </dl>
 193    </div>
 194  </li>
 195  
 196  
 197  <li class="option" id="option-min">
 198    <div class="option-header">
 199      <h3 class="option-name"><a href="#option-min">min</a></h3>
 200      <dl>
 201        <dt class="option-type-label">Type:</dt>
 202          <dd class="option-type">Number</dd>
 203        
 204        <dt class="option-default-label">Default:</dt>
 205          <dd class="option-default">0</dd>
 206        
 207      </dl>
 208    </div>
 209    <div class="option-description">
 210      <p>The minimum value of the slider.</p>
 211    </div>
 212    <div class="option-examples">
 213      <h4>Code examples</h4>
 214      <dl class="option-examples-list">
 215      
 216  <dt>
 217    Initialize a slider with the <code>min</code> option specified.
 218  </dt>
 219  <dd>
 220  <pre><code>$( ".selector" ).slider({ min: -7 });</code></pre>
 221  </dd>
 222  
 223      
 224  <dt>
 225    Get or set the <code>min</code> option, after init.
 226  </dt>
 227  <dd>
 228  <pre><code>//getter
 229  var min = $( ".selector" ).slider( "option", "min" );
 230  //setter
 231  $( ".selector" ).slider( "option", "min", -7 );</code></pre>
 232  </dd>
 233  
 234      </dl>
 235    </div>
 236  </li>
 237  
 238  
 239  <li class="option" id="option-orientation">
 240    <div class="option-header">
 241      <h3 class="option-name"><a href="#option-orientation">orientation</a></h3>
 242      <dl>
 243        <dt class="option-type-label">Type:</dt>
 244          <dd class="option-type">String</dd>
 245        
 246        <dt class="option-default-label">Default:</dt>
 247          <dd class="option-default">'horizontal'</dd>
 248        
 249      </dl>
 250    </div>
 251    <div class="option-description">
 252      <p>This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.</p>
 253    </div>
 254    <div class="option-examples">
 255      <h4>Code examples</h4>
 256      <dl class="option-examples-list">
 257      
 258  <dt>
 259    Initialize a slider with the <code>orientation</code> option specified.
 260  </dt>
 261  <dd>
 262  <pre><code>$( ".selector" ).slider({ orientation: 'vertical' });</code></pre>
 263  </dd>
 264  
 265      
 266  <dt>
 267    Get or set the <code>orientation</code> option, after init.
 268  </dt>
 269  <dd>
 270  <pre><code>//getter
 271  var orientation = $( ".selector" ).slider( "option", "orientation" );
 272  //setter
 273  $( ".selector" ).slider( "option", "orientation", 'vertical' );</code></pre>
 274  </dd>
 275  
 276      </dl>
 277    </div>
 278  </li>
 279  
 280  
 281  <li class="option" id="option-range">
 282    <div class="option-header">
 283      <h3 class="option-name"><a href="#option-range">range</a></h3>
 284      <dl>
 285        <dt class="option-type-label">Type:</dt>
 286          <dd class="option-type">Boolean, String</dd>
 287        
 288        <dt class="option-default-label">Default:</dt>
 289          <dd class="option-default">false</dd>
 290        
 291      </dl>
 292    </div>
 293    <div class="option-description">
 294      <p>If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</p>
 295    </div>
 296    <div class="option-examples">
 297      <h4>Code examples</h4>
 298      <dl class="option-examples-list">
 299      
 300  <dt>
 301    Initialize a slider with the <code>range</code> option specified.
 302  </dt>
 303  <dd>
 304  <pre><code>$( ".selector" ).slider({ range: 'min' });</code></pre>
 305  </dd>
 306  
 307      
 308  <dt>
 309    Get or set the <code>range</code> option, after init.
 310  </dt>
 311  <dd>
 312  <pre><code>//getter
 313  var range = $( ".selector" ).slider( "option", "range" );
 314  //setter
 315  $( ".selector" ).slider( "option", "range", 'min' );</code></pre>
 316  </dd>
 317  
 318      </dl>
 319    </div>
 320  </li>
 321  
 322  
 323  <li class="option" id="option-step">
 324    <div class="option-header">
 325      <h3 class="option-name"><a href="#option-step">step</a></h3>
 326      <dl>
 327        <dt class="option-type-label">Type:</dt>
 328          <dd class="option-type">Number</dd>
 329        
 330        <dt class="option-default-label">Default:</dt>
 331          <dd class="option-default">1</dd>
 332        
 333      </dl>
 334    </div>
 335    <div class="option-description">
 336      <p>Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.</p>
 337    </div>
 338    <div class="option-examples">
 339      <h4>Code examples</h4>
 340      <dl class="option-examples-list">
 341      
 342  <dt>
 343    Initialize a slider with the <code>step</code> option specified.
 344  </dt>
 345  <dd>
 346  <pre><code>$( ".selector" ).slider({ step: 5 });</code></pre>
 347  </dd>
 348  
 349      
 350  <dt>
 351    Get or set the <code>step</code> option, after init.
 352  </dt>
 353  <dd>
 354  <pre><code>//getter
 355  var step = $( ".selector" ).slider( "option", "step" );
 356  //setter
 357  $( ".selector" ).slider( "option", "step", 5 );</code></pre>
 358  </dd>
 359  
 360      </dl>
 361    </div>
 362  </li>
 363  
 364  
 365  <li class="option" id="option-value">
 366    <div class="option-header">
 367      <h3 class="option-name"><a href="#option-value">value</a></h3>
 368      <dl>
 369        <dt class="option-type-label">Type:</dt>
 370          <dd class="option-type">Number</dd>
 371        
 372        <dt class="option-default-label">Default:</dt>
 373          <dd class="option-default">0</dd>
 374        
 375      </dl>
 376    </div>
 377    <div class="option-description">
 378      <p>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</p>
 379    </div>
 380    <div class="option-examples">
 381      <h4>Code examples</h4>
 382      <dl class="option-examples-list">
 383      
 384  <dt>
 385    Initialize a slider with the <code>value</code> option specified.
 386  </dt>
 387  <dd>
 388  <pre><code>$( ".selector" ).slider({ value: 37 });</code></pre>
 389  </dd>
 390  
 391      
 392  <dt>
 393    Get or set the <code>value</code> option, after init.
 394  </dt>
 395  <dd>
 396  <pre><code>//getter
 397  var value = $( ".selector" ).slider( "option", "value" );
 398  //setter
 399  $( ".selector" ).slider( "option", "value", 37 );</code></pre>
 400  </dd>
 401  
 402      </dl>
 403    </div>
 404  </li>
 405  
 406  
 407  <li class="option" id="option-values">
 408    <div class="option-header">
 409      <h3 class="option-name"><a href="#option-values">values</a></h3>
 410      <dl>
 411        <dt class="option-type-label">Type:</dt>
 412          <dd class="option-type">Array</dd>
 413        
 414        <dt class="option-default-label">Default:</dt>
 415          <dd class="option-default">null</dd>
 416        
 417      </dl>
 418    </div>
 419    <div class="option-description">
 420      <p>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</p>
 421    </div>
 422    <div class="option-examples">
 423      <h4>Code examples</h4>
 424      <dl class="option-examples-list">
 425      
 426  <dt>
 427    Initialize a slider with the <code>values</code> option specified.
 428  </dt>
 429  <dd>
 430  <pre><code>$( ".selector" ).slider({ values: [1,5,9] });</code></pre>
 431  </dd>
 432  
 433      
 434  <dt>
 435    Get or set the <code>values</code> option, after init.
 436  </dt>
 437  <dd>
 438  <pre><code>//getter
 439  var values = $( ".selector" ).slider( "option", "values" );
 440  //setter
 441  $( ".selector" ).slider( "option", "values", [1,5,9] );</code></pre>
 442  </dd>
 443  
 444      </dl>
 445    </div>
 446  </li>
 447  
 448      </ul>
 449    </div>
 450    <div id="events">
 451      <h2 class="top-header">Events</h2>
 452      <ul class="events-list">
 453        
 454  <li class="event" id="event-start">
 455    <div class="event-header">
 456      <h3 class="event-name"><a href="#event-start">start</a></h3>
 457      <dl>
 458        <dt class="event-type-label">Type:</dt>
 459          <dd class="event-type">slidestart</dd>
 460      </dl>
 461    </div>
 462    <div class="event-description">
 463      <p>This event is triggered when the user starts sliding.</p>
 464    </div>
 465    <div class="event-examples">
 466      <h4>Code examples</h4>
 467      <dl class="event-examples-list">
 468      
 469  <dt>
 470    Supply a callback function to handle the <code>start</code> event as an init option.
 471  </dt>
 472  <dd>
 473  <pre><code>$( &quot;.selector&quot; ).slider({
 474     start: function(event, ui) { ... }
 475  });</code></pre>
 476  </dd>
 477  
 478      
 479  <dt>
 480    Bind to the <code>start</code> event by type: <code>slidestart</code>.
 481  </dt>
 482  <dd>
 483  <pre><code>$( &quot;.selector&quot; ).bind( &quot;slidestart&quot;, function(event, ui) {
 484    ...
 485  });</code></pre>
 486  </dd>
 487  
 488      </dl>
 489    </div>
 490  </li>
 491  
 492  
 493  <li class="event" id="event-slide">
 494    <div class="event-header">
 495      <h3 class="event-name"><a href="#event-slide">slide</a></h3>
 496      <dl>
 497        <dt class="event-type-label">Type:</dt>
 498          <dd class="event-type">slide</dd>
 499      </dl>
 500    </div>
 501    <div class="event-description">
 502      <p>This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
 503  </p><p>Return false in order to prevent a slide, based on ui.value.</p>
 504    </div>
 505    <div class="event-examples">
 506      <h4>Code examples</h4>
 507      <dl class="event-examples-list">
 508      
 509  <dt>
 510    Supply a callback function to handle the <code>slide</code> event as an init option.
 511  </dt>
 512  <dd>
 513  <pre><code>$( &quot;.selector&quot; ).slider({
 514     slide: function(event, ui) { ... }
 515  });</code></pre>
 516  </dd>
 517  
 518      
 519  <dt>
 520    Bind to the <code>slide</code> event by type: <code>slide</code>.
 521  </dt>
 522  <dd>
 523  <pre><code>$( &quot;.selector&quot; ).bind( &quot;slide&quot;, function(event, ui) {
 524    ...
 525  });</code></pre>
 526  </dd>
 527  
 528      </dl>
 529    </div>
 530  </li>
 531  
 532  
 533  <li class="event" id="event-change">
 534    <div class="event-header">
 535      <h3 class="event-name"><a href="#event-change">change</a></h3>
 536      <dl>
 537        <dt class="event-type-label">Type:</dt>
 538          <dd class="event-type">slidechange</dd>
 539      </dl>
 540    </div>
 541    <div class="event-description">
 542      <p>This event is triggered on slide stop, or if the value is changed programmatically (by the <code>value</code> method).  Takes arguments event and ui.  Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.</p>
 543    </div>
 544    <div class="event-examples">
 545      <h4>Code examples</h4>
 546      <dl class="event-examples-list">
 547      
 548  <dt>
 549    Supply a callback function to handle the <code>change</code> event as an init option.
 550  </dt>
 551  <dd>
 552  <pre><code>$( &quot;.selector&quot; ).slider({
 553     change: function(event, ui) { ... }
 554  });</code></pre>
 555  </dd>
 556  
 557      
 558  <dt>
 559    Bind to the <code>change</code> event by type: <code>slidechange</code>.
 560  </dt>
 561  <dd>
 562  <pre><code>$( &quot;.selector&quot; ).bind( &quot;slidechange&quot;, function(event, ui) {
 563    ...
 564  });</code></pre>
 565  </dd>
 566  
 567      </dl>
 568    </div>
 569  </li>
 570  
 571  
 572  <li class="event" id="event-stop">
 573    <div class="event-header">
 574      <h3 class="event-name"><a href="#event-stop">stop</a></h3>
 575      <dl>
 576        <dt class="event-type-label">Type:</dt>
 577          <dd class="event-type">slidestop</dd>
 578      </dl>
 579    </div>
 580    <div class="event-description">
 581      <p>This event is triggered when the user stops sliding.</p>
 582    </div>
 583    <div class="event-examples">
 584      <h4>Code examples</h4>
 585      <dl class="event-examples-list">
 586      
 587  <dt>
 588    Supply a callback function to handle the <code>stop</code> event as an init option.
 589  </dt>
 590  <dd>
 591  <pre><code>$( &quot;.selector&quot; ).slider({
 592     stop: function(event, ui) { ... }
 593  });</code></pre>
 594  </dd>
 595  
 596      
 597  <dt>
 598    Bind to the <code>stop</code> event by type: <code>slidestop</code>.
 599  </dt>
 600  <dd>
 601  <pre><code>$( &quot;.selector&quot; ).bind( &quot;slidestop&quot;, function(event, ui) {
 602    ...
 603  });</code></pre>
 604  </dd>
 605  
 606      </dl>
 607    </div>
 608  </li>
 609  
 610      </ul>
 611    </div>
 612    <div id="methods">
 613      <h2 class="top-header">Methods</h2>
 614      <ul class="methods-list">
 615        
 616  <li class="method" id="method-destroy">
 617    <div class="method-header">
 618      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 619      <dl>
 620        <dt class="method-signature-label">Signature:</dt>
 621          <dd class="method-signature">.slider( "destroy"
 622  
 623  
 624  
 625  
 626  
 627  
 628  
 629  )</dd>
 630      </dl>
 631    </div>
 632    <div class="method-description">
 633      <p>Remove the slider functionality completely. This will return the element back to its pre-init state.</p>
 634    </div>
 635  </li>
 636  
 637  
 638  <li class="method" id="method-disable">
 639    <div class="method-header">
 640      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 641      <dl>
 642        <dt class="method-signature-label">Signature:</dt>
 643          <dd class="method-signature">.slider( "disable"
 644  
 645  
 646  
 647  
 648  
 649  
 650  
 651  )</dd>
 652      </dl>
 653    </div>
 654    <div class="method-description">
 655      <p>Disable the slider.</p>
 656    </div>
 657  </li>
 658  
 659  
 660  <li class="method" id="method-enable">
 661    <div class="method-header">
 662      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 663      <dl>
 664        <dt class="method-signature-label">Signature:</dt>
 665          <dd class="method-signature">.slider( "enable"
 666  
 667  
 668  
 669  
 670  
 671  
 672  
 673  )</dd>
 674      </dl>
 675    </div>
 676    <div class="method-description">
 677      <p>Enable the slider.</p>
 678    </div>
 679  </li>
 680  
 681  
 682  <li class="method" id="method-option">
 683    <div class="method-header">
 684      <h3 class="method-name"><a href="#method-option">option</a></h3>
 685      <dl>
 686        <dt class="method-signature-label">Signature:</dt>
 687          <dd class="method-signature">.slider( "option"
 688  
 689  , optionName
 690  
 691  , <span class="optional">[</span>value<span class="optional">] </span>
 692  
 693  
 694  
 695  )</dd>
 696      </dl>
 697    </div>
 698    <div class="method-description">
 699      <p>Get or set any slider option. If no value is specified, will act as a getter.</p>
 700    </div>
 701  </li>
 702  
 703  
 704  <li class="method" id="method-option">
 705    <div class="method-header">
 706      <h3 class="method-name"><a href="#method-option">option</a></h3>
 707      <dl>
 708        <dt class="method-signature-label">Signature:</dt>
 709          <dd class="method-signature">.slider( "option"
 710  
 711  , options
 712  
 713  
 714  
 715  
 716  
 717  )</dd>
 718      </dl>
 719    </div>
 720    <div class="method-description">
 721      <p>Set multiple slider options at once by providing an options object.</p>
 722    </div>
 723  </li>
 724  
 725  
 726  <li class="method" id="method-widget">
 727    <div class="method-header">
 728      <h3 class="method-name"><a href="#method-widget">widget</a></h3>
 729      <dl>
 730        <dt class="method-signature-label">Signature:</dt>
 731          <dd class="method-signature">.slider( "widget"
 732  
 733  
 734  
 735  
 736  
 737  
 738  
 739  )</dd>
 740      </dl>
 741    </div>
 742    <div class="method-description">
 743      <p>Returns the .ui-slider element.</p>
 744    </div>
 745  </li>
 746  
 747  
 748  <li class="method" id="method-value">
 749    <div class="method-header">
 750      <h3 class="method-name"><a href="#method-value">value</a></h3>
 751      <dl>
 752        <dt class="method-signature-label">Signature:</dt>
 753          <dd class="method-signature">.slider( "value"
 754  
 755  , <span class="optional">[</span>value<span class="optional">] </span>
 756  
 757  
 758  
 759  
 760  
 761  )</dd>
 762      </dl>
 763    </div>
 764    <div class="method-description">
 765      <p>Gets or sets the value of the slider. For single handle sliders.</p>
 766    </div>
 767  </li>
 768  
 769  
 770  <li class="method" id="method-values">
 771    <div class="method-header">
 772      <h3 class="method-name"><a href="#method-values">values</a></h3>
 773      <dl>
 774        <dt class="method-signature-label">Signature:</dt>
 775          <dd class="method-signature">.slider( "values"
 776  
 777  , index
 778  
 779  , <span class="optional">[</span>value<span class="optional">] </span>
 780  
 781  
 782  
 783  )</dd>
 784      </dl>
 785    </div>
 786    <div class="method-description">
 787      <p>Gets or sets the values of the slider. For multiple handle or range sliders.</p>
 788    </div>
 789  </li>
 790  
 791      </ul>
 792    </div>
 793    <div id="theming">
 794      <h2 class="top-header">Theming</h2>
 795      <p>The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
 796  </p>
 797    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
 798  </p>
 799      
 800    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 801    &lt;div class=&quot;ui-slider<strong> ui-slider-horizontal</strong> ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
 802  &nbsp;&nbsp;&nbsp;&lt;a style=&quot;left: 0%;&quot; class=&quot;<strong>ui-slider-handle</strong> ui-state-default ui-corner-all&quot; href=&quot;#&quot;&gt;&lt;/a&gt;<br />
 803  &lt;/div&gt;<br />
 804    <p class="theme-note">
 805      <strong>
 806        Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is &lt;div&gt;&lt;div&gt;.
 807      </strong>
 808    </p>
 809  
 810    </div>
 811  </div>
 812  
 813  </p><!-- 
 814  Pre-expand include size: 34930 bytes
 815  Post-expand include size: 52425 bytes
 816  Template argument size: 26643 bytes
 817  Maximum: 2097152 bytes
 818  -->
 819  
 820  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3349-1!1!0!!en!2 and timestamp 20100421062706 -->