[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 type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  43    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
  44    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
  45    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.slider.js&quot;&gt;&lt;/script&gt;
  46    &lt;style type=&quot;text/css&quot;&gt;
  47      #slider { margin: 10px; }
  48    &lt;/style&gt;
  49    &lt;script type="text/javascript"&gt;
  50    $(document).ready(function(){
  51      $(&quot;#slider&quot;).slider();
  52    });
  53    &lt;/script&gt;
  54  &lt;/head&gt;
  55  &lt;body style="font-size:62.5%;"&gt;
  56    
  57  &lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;
  58  
  59  &lt;/body&gt;
  60  &lt;/html&gt;
  61  </pre>
  62  <p></div>
  63  </p><p></div>
  64      </div>
  65    </div>
  66    <div id="options">
  67      <h2 class="top-header">Options</h2>
  68      <ul class="options-list">
  69        
  70  <li class="option" id="option-animate">
  71    <div class="option-header">
  72      <h3 class="option-name"><a href="#option-animate">animate</a></h3>
  73      <dl>
  74        <dt class="option-type-label">Type:</dt>
  75          <dd class="option-type">Boolean</dd>
  76        
  77        <dt class="option-default-label">Default:</dt>
  78          <dd class="option-default">false</dd>
  79        
  80      </dl>
  81    </div>
  82    <div class="option-description">
  83      <p>Whether to slide handle smoothly when user click outside handle on the bar.</p>
  84    </div>
  85    <div class="option-examples">
  86      <h4>Code examples</h4>
  87      <dl class="option-examples-list">
  88      
  89  <dt>
  90    Initialize a slider with the <code>animate</code> option specified.
  91  </dt>
  92  <dd>
  93  <pre><code>$('.selector').slider({ animate: true });</code></pre>
  94  </dd>
  95  
  96      
  97  <dt>
  98    Get or set the <code>animate</code> option, after init.
  99  </dt>
 100  <dd>
 101  <pre><code>//getter
 102  var animate = $('.selector').slider('option', 'animate');
 103  //setter
 104  $('.selector').slider('option', 'animate', true);</code></pre>
 105  </dd>
 106  
 107      </dl>
 108    </div>
 109  </li>
 110  
 111  
 112  <li class="option" id="option-max">
 113    <div class="option-header">
 114      <h3 class="option-name"><a href="#option-max">max</a></h3>
 115      <dl>
 116        <dt class="option-type-label">Type:</dt>
 117          <dd class="option-type">Number</dd>
 118        
 119        <dt class="option-default-label">Default:</dt>
 120          <dd class="option-default">100</dd>
 121        
 122      </dl>
 123    </div>
 124    <div class="option-description">
 125      <p>The maximum value of the slider.</p>
 126    </div>
 127    <div class="option-examples">
 128      <h4>Code examples</h4>
 129      <dl class="option-examples-list">
 130      
 131  <dt>
 132    Initialize a slider with the <code>max</code> option specified.
 133  </dt>
 134  <dd>
 135  <pre><code>$('.selector').slider({ max: 7 });</code></pre>
 136  </dd>
 137  
 138      
 139  <dt>
 140    Get or set the <code>max</code> option, after init.
 141  </dt>
 142  <dd>
 143  <pre><code>//getter
 144  var max = $('.selector').slider('option', 'max');
 145  //setter
 146  $('.selector').slider('option', 'max', 7);</code></pre>
 147  </dd>
 148  
 149      </dl>
 150    </div>
 151  </li>
 152  
 153  
 154  <li class="option" id="option-min">
 155    <div class="option-header">
 156      <h3 class="option-name"><a href="#option-min">min</a></h3>
 157      <dl>
 158        <dt class="option-type-label">Type:</dt>
 159          <dd class="option-type">Number</dd>
 160        
 161        <dt class="option-default-label">Default:</dt>
 162          <dd class="option-default">0</dd>
 163        
 164      </dl>
 165    </div>
 166    <div class="option-description">
 167      <p>The minimum value of the slider.</p>
 168    </div>
 169    <div class="option-examples">
 170      <h4>Code examples</h4>
 171      <dl class="option-examples-list">
 172      
 173  <dt>
 174    Initialize a slider with the <code>min</code> option specified.
 175  </dt>
 176  <dd>
 177  <pre><code>$('.selector').slider({ min: -7 });</code></pre>
 178  </dd>
 179  
 180      
 181  <dt>
 182    Get or set the <code>min</code> option, after init.
 183  </dt>
 184  <dd>
 185  <pre><code>//getter
 186  var min = $('.selector').slider('option', 'min');
 187  //setter
 188  $('.selector').slider('option', 'min', -7);</code></pre>
 189  </dd>
 190  
 191      </dl>
 192    </div>
 193  </li>
 194  
 195  
 196  <li class="option" id="option-orientation">
 197    <div class="option-header">
 198      <h3 class="option-name"><a href="#option-orientation">orientation</a></h3>
 199      <dl>
 200        <dt class="option-type-label">Type:</dt>
 201          <dd class="option-type">String</dd>
 202        
 203        <dt class="option-default-label">Default:</dt>
 204          <dd class="option-default">'auto'</dd>
 205        
 206      </dl>
 207    </div>
 208    <div class="option-description">
 209      <p>Normally you don't need to set this option because the plugin detects the slider orientation automatically. If the orientation is not correctly detected you can set this option to 'horizontal' or 'vertical'.</p>
 210    </div>
 211    <div class="option-examples">
 212      <h4>Code examples</h4>
 213      <dl class="option-examples-list">
 214      
 215  <dt>
 216    Initialize a slider with the <code>orientation</code> option specified.
 217  </dt>
 218  <dd>
 219  <pre><code>$('.selector').slider({ orientation: 'vertical' });</code></pre>
 220  </dd>
 221  
 222      
 223  <dt>
 224    Get or set the <code>orientation</code> option, after init.
 225  </dt>
 226  <dd>
 227  <pre><code>//getter
 228  var orientation = $('.selector').slider('option', 'orientation');
 229  //setter
 230  $('.selector').slider('option', 'orientation', 'vertical');</code></pre>
 231  </dd>
 232  
 233      </dl>
 234    </div>
 235  </li>
 236  
 237  
 238  <li class="option" id="option-range">
 239    <div class="option-header">
 240      <h3 class="option-name"><a href="#option-range">range</a></h3>
 241      <dl>
 242        <dt class="option-type-label">Type:</dt>
 243          <dd class="option-type">Boolean, String</dd>
 244        
 245        <dt class="option-default-label">Default:</dt>
 246          <dd class="option-default">false</dd>
 247        
 248      </dl>
 249    </div>
 250    <div class="option-description">
 251      <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>
 252    </div>
 253    <div class="option-examples">
 254      <h4>Code examples</h4>
 255      <dl class="option-examples-list">
 256      
 257  <dt>
 258    Initialize a slider with the <code>range</code> option specified.
 259  </dt>
 260  <dd>
 261  <pre><code>$('.selector').slider({ range: 'min' });</code></pre>
 262  </dd>
 263  
 264      
 265  <dt>
 266    Get or set the <code>range</code> option, after init.
 267  </dt>
 268  <dd>
 269  <pre><code>//getter
 270  var range = $('.selector').slider('option', 'range');
 271  //setter
 272  $('.selector').slider('option', 'range', 'min');</code></pre>
 273  </dd>
 274  
 275      </dl>
 276    </div>
 277  </li>
 278  
 279  
 280  <li class="option" id="option-step">
 281    <div class="option-header">
 282      <h3 class="option-name"><a href="#option-step">step</a></h3>
 283      <dl>
 284        <dt class="option-type-label">Type:</dt>
 285          <dd class="option-type">Number</dd>
 286        
 287        <dt class="option-default-label">Default:</dt>
 288          <dd class="option-default">1</dd>
 289        
 290      </dl>
 291    </div>
 292    <div class="option-description">
 293      <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>
 294    </div>
 295    <div class="option-examples">
 296      <h4>Code examples</h4>
 297      <dl class="option-examples-list">
 298      
 299  <dt>
 300    Initialize a slider with the <code>step</code> option specified.
 301  </dt>
 302  <dd>
 303  <pre><code>$('.selector').slider({ step: 5 });</code></pre>
 304  </dd>
 305  
 306      
 307  <dt>
 308    Get or set the <code>step</code> option, after init.
 309  </dt>
 310  <dd>
 311  <pre><code>//getter
 312  var step = $('.selector').slider('option', 'step');
 313  //setter
 314  $('.selector').slider('option', 'step', 5);</code></pre>
 315  </dd>
 316  
 317      </dl>
 318    </div>
 319  </li>
 320  
 321  
 322  <li class="option" id="option-value">
 323    <div class="option-header">
 324      <h3 class="option-name"><a href="#option-value">value</a></h3>
 325      <dl>
 326        <dt class="option-type-label">Type:</dt>
 327          <dd class="option-type">Number</dd>
 328        
 329        <dt class="option-default-label">Default:</dt>
 330          <dd class="option-default">0</dd>
 331        
 332      </dl>
 333    </div>
 334    <div class="option-description">
 335      <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>
 336    </div>
 337    <div class="option-examples">
 338      <h4>Code examples</h4>
 339      <dl class="option-examples-list">
 340      
 341  <dt>
 342    Initialize a slider with the <code>value</code> option specified.
 343  </dt>
 344  <dd>
 345  <pre><code>$('.selector').slider({ value: 37 });</code></pre>
 346  </dd>
 347  
 348      
 349  <dt>
 350    Get or set the <code>value</code> option, after init.
 351  </dt>
 352  <dd>
 353  <pre><code>//getter
 354  var value = $('.selector').slider('option', 'value');
 355  //setter
 356  $('.selector').slider('option', 'value', 37);</code></pre>
 357  </dd>
 358  
 359      </dl>
 360    </div>
 361  </li>
 362  
 363  
 364  <li class="option" id="option-values">
 365    <div class="option-header">
 366      <h3 class="option-name"><a href="#option-values">values</a></h3>
 367      <dl>
 368        <dt class="option-type-label">Type:</dt>
 369          <dd class="option-type">Array</dd>
 370        
 371        <dt class="option-default-label">Default:</dt>
 372          <dd class="option-default">null</dd>
 373        
 374      </dl>
 375    </div>
 376    <div class="option-description">
 377      <p>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</p>
 378    </div>
 379    <div class="option-examples">
 380      <h4>Code examples</h4>
 381      <dl class="option-examples-list">
 382      
 383  <dt>
 384    Initialize a slider with the <code>values</code> option specified.
 385  </dt>
 386  <dd>
 387  <pre><code>$('.selector').slider({ values: [1,5,9] });</code></pre>
 388  </dd>
 389  
 390      
 391  <dt>
 392    Get or set the <code>values</code> option, after init.
 393  </dt>
 394  <dd>
 395  <pre><code>//getter
 396  var values = $('.selector').slider('option', 'values');
 397  //setter
 398  $('.selector').slider('option', 'values', [1,5,9]);</code></pre>
 399  </dd>
 400  
 401      </dl>
 402    </div>
 403  </li>
 404  
 405      </ul>
 406    </div>
 407    <div id="events">
 408      <h2 class="top-header">Events</h2>
 409      <ul class="events-list">
 410        
 411  <li class="event" id="event-start">
 412    <div class="event-header">
 413      <h3 class="event-name"><a href="#event-start">start</a></h3>
 414      <dl>
 415        <dt class="event-type-label">Type:</dt>
 416          <dd class="event-type">slidestart</dd>
 417      </dl>
 418    </div>
 419    <div class="event-description">
 420      <p>This event is triggered when the user starts sliding.</p>
 421    </div>
 422    <div class="event-examples">
 423      <h4>Code examples</h4>
 424      <dl class="event-examples-list">
 425      
 426  <dt>
 427    Supply a callback function to handle the <code>start</code> event as an init option.
 428  </dt>
 429  <dd>
 430  <pre><code>$('.selector').slider({
 431     start: function(event, ui) { ... }
 432  });</code></pre>
 433  </dd>
 434  
 435      
 436  <dt>
 437    Bind to the <code>start</code> event by type: <code>slidestart</code>.
 438  </dt>
 439  <dd>
 440  <pre><code>$('.selector').bind('slidestart', function(event, ui) {
 441    ...
 442  });</code></pre>
 443  </dd>
 444  
 445      </dl>
 446    </div>
 447  </li>
 448  
 449  
 450  <li class="event" id="event-slide">
 451    <div class="event-header">
 452      <h3 class="event-name"><a href="#event-slide">slide</a></h3>
 453      <dl>
 454        <dt class="event-type-label">Type:</dt>
 455          <dd class="event-type">slide</dd>
 456      </dl>
 457    </div>
 458    <div class="event-description">
 459      <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.
 460  </p><p>Return false in order to prevent a slide, based on ui.value.</p>
 461    </div>
 462    <div class="event-examples">
 463      <h4>Code examples</h4>
 464      <dl class="event-examples-list">
 465      
 466  <dt>
 467    Supply a callback function to handle the <code>slide</code> event as an init option.
 468  </dt>
 469  <dd>
 470  <pre><code>$('.selector').slider({
 471     slide: function(event, ui) { ... }
 472  });</code></pre>
 473  </dd>
 474  
 475      
 476  <dt>
 477    Bind to the <code>slide</code> event by type: <code>slide</code>.
 478  </dt>
 479  <dd>
 480  <pre><code>$('.selector').bind('slide', function(event, ui) {
 481    ...
 482  });</code></pre>
 483  </dd>
 484  
 485      </dl>
 486    </div>
 487  </li>
 488  
 489  
 490  <li class="event" id="event-change">
 491    <div class="event-header">
 492      <h3 class="event-name"><a href="#event-change">change</a></h3>
 493      <dl>
 494        <dt class="event-type-label">Type:</dt>
 495          <dd class="event-type">slidechange</dd>
 496      </dl>
 497    </div>
 498    <div class="event-description">
 499      <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>
 500    </div>
 501    <div class="event-examples">
 502      <h4>Code examples</h4>
 503      <dl class="event-examples-list">
 504      
 505  <dt>
 506    Supply a callback function to handle the <code>change</code> event as an init option.
 507  </dt>
 508  <dd>
 509  <pre><code>$('.selector').slider({
 510     change: function(event, ui) { ... }
 511  });</code></pre>
 512  </dd>
 513  
 514      
 515  <dt>
 516    Bind to the <code>change</code> event by type: <code>slidechange</code>.
 517  </dt>
 518  <dd>
 519  <pre><code>$('.selector').bind('slidechange', function(event, ui) {
 520    ...
 521  });</code></pre>
 522  </dd>
 523  
 524      </dl>
 525    </div>
 526  </li>
 527  
 528  
 529  <li class="event" id="event-stop">
 530    <div class="event-header">
 531      <h3 class="event-name"><a href="#event-stop">stop</a></h3>
 532      <dl>
 533        <dt class="event-type-label">Type:</dt>
 534          <dd class="event-type">slidestop</dd>
 535      </dl>
 536    </div>
 537    <div class="event-description">
 538      <p>This event is triggered when the user stops sliding.</p>
 539    </div>
 540    <div class="event-examples">
 541      <h4>Code examples</h4>
 542      <dl class="event-examples-list">
 543      
 544  <dt>
 545    Supply a callback function to handle the <code>stop</code> event as an init option.
 546  </dt>
 547  <dd>
 548  <pre><code>$('.selector').slider({
 549     stop: function(event, ui) { ... }
 550  });</code></pre>
 551  </dd>
 552  
 553      
 554  <dt>
 555    Bind to the <code>stop</code> event by type: <code>slidestop</code>.
 556  </dt>
 557  <dd>
 558  <pre><code>$('.selector').bind('slidestop', function(event, ui) {
 559    ...
 560  });</code></pre>
 561  </dd>
 562  
 563      </dl>
 564    </div>
 565  </li>
 566  
 567      </ul>
 568    </div>
 569    <div id="methods">
 570      <h2 class="top-header">Methods</h2>
 571      <ul class="methods-list">
 572        
 573  <li class="method" id="method-destroy">
 574    <div class="method-header">
 575      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 576      <dl>
 577        <dt class="method-signature-label">Signature:</dt>
 578          <dd class="method-signature">.slider( 'destroy'
 579  
 580  
 581  
 582  
 583  
 584  
 585  
 586  )</dd>
 587      </dl>
 588    </div>
 589    <div class="method-description">
 590      <p>Remove the slider functionality completely. This will return the element back to its pre-init state.</p>
 591    </div>
 592  </li>
 593  
 594  
 595  <li class="method" id="method-disable">
 596    <div class="method-header">
 597      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 598      <dl>
 599        <dt class="method-signature-label">Signature:</dt>
 600          <dd class="method-signature">.slider( 'disable'
 601  
 602  
 603  
 604  
 605  
 606  
 607  
 608  )</dd>
 609      </dl>
 610    </div>
 611    <div class="method-description">
 612      <p>Disable the slider.</p>
 613    </div>
 614  </li>
 615  
 616  
 617  <li class="method" id="method-enable">
 618    <div class="method-header">
 619      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 620      <dl>
 621        <dt class="method-signature-label">Signature:</dt>
 622          <dd class="method-signature">.slider( 'enable'
 623  
 624  
 625  
 626  
 627  
 628  
 629  
 630  )</dd>
 631      </dl>
 632    </div>
 633    <div class="method-description">
 634      <p>Enable the slider.</p>
 635    </div>
 636  </li>
 637  
 638  
 639  <li class="method" id="method-option">
 640    <div class="method-header">
 641      <h3 class="method-name"><a href="#method-option">option</a></h3>
 642      <dl>
 643        <dt class="method-signature-label">Signature:</dt>
 644          <dd class="method-signature">.slider( 'option'
 645  
 646  , optionName
 647  
 648  , <span class="optional">[</span>value<span class="optional">] </span>
 649  
 650  
 651  
 652  )</dd>
 653      </dl>
 654    </div>
 655    <div class="method-description">
 656      <p>Get or set any slider option. If no value is specified, will act as a getter.</p>
 657    </div>
 658  </li>
 659  
 660  
 661  <li class="method" id="method-value">
 662    <div class="method-header">
 663      <h3 class="method-name"><a href="#method-value">value</a></h3>
 664      <dl>
 665        <dt class="method-signature-label">Signature:</dt>
 666          <dd class="method-signature">.slider( 'value'
 667  
 668  , <span class="optional">[</span>value<span class="optional">] </span>
 669  
 670  
 671  
 672  
 673  
 674  )</dd>
 675      </dl>
 676    </div>
 677    <div class="method-description">
 678      <p>Gets or sets the value of the slider. For single handle sliders.</p>
 679    </div>
 680  </li>
 681  
 682  
 683  <li class="method" id="method-values">
 684    <div class="method-header">
 685      <h3 class="method-name"><a href="#method-values">values</a></h3>
 686      <dl>
 687        <dt class="method-signature-label">Signature:</dt>
 688          <dd class="method-signature">.slider( 'values'
 689  
 690  , index
 691  
 692  , <span class="optional">[</span>value<span class="optional">] </span>
 693  
 694  
 695  
 696  )</dd>
 697      </dl>
 698    </div>
 699    <div class="method-description">
 700      <p>Gets or sets the values of the slider. For multiple handle or range sliders.</p>
 701    </div>
 702  </li>
 703  
 704      </ul>
 705    </div>
 706    <div id="theming">
 707      <h2 class="top-header">Theming</h2>
 708      <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.
 709  </p>
 710    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
 711  </p>
 712      
 713    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 714    &lt;div class=&quot;ui-slider<strong> ui-slider-horizontal</strong> ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
 715  &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 />
 716  &lt;/div&gt;<br />
 717    <p class="theme-note">
 718      <strong>
 719        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;.
 720      </strong>
 721    </p>
 722  
 723    </div>
 724  </div>
 725  
 726  </p><!-- 
 727  Pre-expand include size: 30277 bytes
 728  Post-expand include size: 46114 bytes
 729  Template argument size: 25048 bytes
 730  Maximum: 2097152 bytes
 731  -->
 732  
 733  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3349-1!1!0!!en!2 and timestamp 20090604112222 -->