Create JQuery UI widget from scratch

jQuery UI widgets usually are called on an existing DOM element that has the basic needs for the widget, depending on what the widget is, this can be even an empty element, say an empty DIV.

Very often the widget takes that as a base to it, and creates a number of child elements to render itself correctly. Unless you call destroy on the widget, those will remain there, and you can always even override their styles, etc.

A perfect example is the slider widget. You can pass all parameters to the widget and just call it on empty DIV or so, it does create all the required child element like the handle and other parts, and the CSS framework of jQuery UI already provides the styling for those created elements (based on the CSS classes that the widget adds to them when it creates them).

So, in the official slider example page, this:

<style>
    #demo-frame > div.demo { padding: 10px !important; }
    </style>
    <script>
    $(function() {
        $( "#slider" ).slider();
    });
    </script>

<div class="demo">

<div id="slider"></div>

</div>

generates that:

<div class="demo">

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a></div>

</div>