Trying to place Slider in span tag instead of div

Trying to place Slider in span tag instead of div

Hi Guys,
I'm having some difficulty doing something that I thought would be
simple. I have a Jquery UI slider which I'd like to place in <span>
tags instead of <div> tags.
I'm using the simplest example on the jQuery UI site:
http://jqueryui.com/demos/slider/#default
It works fine when I use <div>:
<div id="slider"></div>
But when I use <span>:
<span id="slider></div
The slider renders improperly. Any help would be appreciated. Here's
the code I'm using:
<style type="text/css">
        #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script type="text/javascript">
    $(function() {
        $("#slider").slider();
    });
    </script>
<div class="demo">
<div id="slider"></div>
</div>
--