Trouble Creating a jQuery Mobile UI Slider in Dynamic Elements

Question

I'm trying to create a jQuery UI slider widget in a dynamically created list element. As it stands, the list works, items are created and added to the list, the slider shows up and responds to user input, but it isn't initialized with the values I've passed in. I feel like I'm close, but that I'm missing something. I'm using jQuery Mobile 1.0.1, with jQuery 1.6.4, and I'm relatively new to Javascript and jQuery.

Aside form a header and footer, here's the sum total of content in the main page:

<div data-role="content">
  <ul data-role="listview" data-theme="g" id="items">
  </ul>      
</div>

Nothing fancy.

Now, the user clicks a few buttons in the footer, an array is updated and I add a list item as such (stripped down):

    var item = arguments[0];

    // items_in_order is a 2d global array that's 
    // updated w/ the items the user adds
    var li = get_list_item( item, 
                            items_in_order[item][0], 
                            items_in_order[item][1], 
                            items_in_order[item][2] );

    // if the list item already exists, replace it, 
    // otherwise add it to the list as a new entry.        
    if ( $("#item_" + item).length ) {
      $("#item_" + item).replaceWith( li );
    }
    else {
      $("#items").append( li );
    }

    // this is where I'm creating the slider
    if ( items_in_order[item][2] ) {
      $("#item_" + item + "_price_slider").slider({ value: 1, 
                                                    min: 0, 
                                                    max: 2, 
                                                    step: 1 });

    }

    // if we updated an existing list item, recreate it,
    // otherwise recreate the whole list
    if ( $("#item_" + item).length ) {
      $("#item_" + item).trigger('create');
    }
    else {
      $("#items").trigger('create');
    }

    // and refresh the list view
    $('#items').listview('refresh');

And the HTML for the list item is being created in this function:

function get_list_item ( name, qty, price, by_weight ) {

  var str = "";
  str += '<li id="item_' + name + '">';
  str += '<table style=" font-size: 20pt; %" ><tr>';
  str +=   '<td style="width: 50%;">' + name + "</td>";
  str +=   '<td style="width: 50%; ">';
  str +=     '<input style=" width: 40px; float: left " type="number" id="item_' + name + '_qty" value="' + qty + '"> x ' + price;
  str +=   '</td>';      
  str += "</tr></table>";
  if ( by_weight ) {
    str += '<div><div id="item_' + name + '_price_slider"></div></div>';

  }
  str += "</li>";

  return str;
}

Again, nothing fancy. Now here is the HTML that's created when the page is rendered. (Copied out of firebug.)

<li id="item_Potatoes" class="ui-li ui-li-static ui-body-g">
  <table style="font-size: 20pt; width: 100%;">
    <tbody>
      <tr>
        <td style="width: 50%;">Potatoes</td>
        <td style="width: 10%;">
          <input type="number" value="1" id="item_Potatoes_qty" style="width: 40px; float: left;" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"> x 2
        </td>
        <td style="width: 10%;">$2</td>
      </tr>
    </tbody>
  </table>
  <div>
    <div id="item_Potatoes_price_slider" class="ui-slider-switch"></div>
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
      <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="-1" aria-labelledby="item_Potatoes_price_slider-label" style="left: 0%;" aria-valuetext="" title="-1">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
          <span class="ui-btn-text"></span>
        </span>
      </a>
    </div>
  </div>
</li>

So, two things I notice as a novice:

1. the settings for min, max, etc don't seem to be set correctly.
2. I had the impression that the call to .slider() would insert the ui slider into the element whose id it's called on, in this case #item_Potatoes_price_slider, but as you can see it's creating a new element "next" to the one it was called upon. Is this relevant or am I misunderstanding something?
3. I had also been including a callback to slider to update the #item_Potatoes_qty box as it's slid, but that wasn't working either. I cut it out as I was debugging, and that didn't seem to affect anything.

So, any ideas why this isn't working? (As an aside, I'm also open to suggestions on improving this and making it cleaner, too.) Thanks!