http://cl.ly/2W1V3s0G2G3y3D133I3U <--screenshot of rendered slider

It acts normally by clicking the inner whitespace of the slider and dragging, values act accordingly, but the handles do not move and fill the area, and the line at the top grows/shrinks with the difference of the two values. Here is the code I am using to initiate the slider.

   $('.sliderific').each(function(){
        alert($(this).attr('id'));
        $(this).slider({
            range: true,
   min: 0,
   max: 500,
   values: [ 75, 300 ],
   slide: function( event, ui ) {
    $(this).nextAll('.left:first').text(ui.values[ 0 ]);
    $(this).nextAll('.right:first').text(ui.values[ 1 ]);
   } 
        });
   });

and here is the DOM it's being applied to...

        <div class="white notwide">
            <div id="price-slider" class="sliderific"></div>
            <span class="em small gray left center">Min Price</span>
            <span class="em small gray right center">Max Price </span>
        </div>

EDIT : Also, I have verified I am including the proper css and the jquery theme images are connecting and being loaded.