jquery slider not showing

I have a jQuery slider that I am trying to implement into my wordpress site.

HTML

<h2 class="pov-header price-range-trigger">Price Range</h2>
<div id="price-range-container" style="display:none;">
   <div id="slider-range" style="font-size: 90%; margin-top: 5em;"></div>
   <div id="slider-value-min" style="margin-top: 1.5em;float:left"></div>
   <div id="slider-value-max" style="margin-top: 1.5em;float:right"></div>
</div>

JS

$(function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500000,
    step: 10000,
    values: [ 0, 500000 ],
    slide: function( event, ui ) {
      $( "#slider-range" ).val( "R" + ui.values[ 0 ] + " - R" + ui.values[ 1 ] );
      $( "#slider-value > #slider-value-min" ).html( ui.values[0] );
      $( "#slider-value > #slider-value-max" ).html( ui.values[1] );
      var minRange = $( "#slider-value > #slider-value-min" ).html();
      var maxRange = $( "#slider-value > #slider-value-max" ).html();

    },
    change: function( event, ui ) {
          $( "#slider-range" ).val( "R" + ui.values[ 0 ] + " - R" + ui.values[ 1 ] );
        }
  });

$( "#slider-range" ).val( "R" + $( "#slider-range" ).slider( "values", 0 ) +
  " - R" + $( "#slider-range" ).slider( "values", 1 ) );
});

My problem is that this shows nothing in the area where it is supposed to be, I am very very new to jquery and have been doing tutorials on this for most of the day, it just seems like I am missing something.

Does anybody know where I may be going wrong?