Formatting Content

The use of the slider () method changes the appearance of HTML elements in the page, adding new CSS classes that give them the appropriate style.

Figure 7-2 shows the HTML generated by jQuery UI, once the slider () instruction modifies the HTML (the code was recovered using the Firebug extension in Firefox).

HTML generated by the slider () method

Figure 7-2. HTML generated by the slider () method

CSS classes of elements customize the display. For example, if we change the ui-slider class associated with <div> elements using a <style> tag, as in the following HTML code, we can change the slider’s width and background color:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<style type=text/css>
  div#slider.ui-slider {
    width : 100px;
    background : black;

<div id=slider></div>


$("div#slider").slider ();


This HTML code is identical, except that we added the <style> tag after the inclusion of jQuery UI styles. The addition of our own styles must be done after those of jQuery UI, or our changes will be ignored. Figure 7-3 shows the new style.

Customized slider

Figure 7-3. Customized slider

The slider now has a width of 100 pixels ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.