jquery滑块未显示

我有一个jQuery滑块，我正试图在我的wordpress站点中实现它。

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 ) );
});

我的问题是，这在它应该所在的区域没有显示任何内容，我对jquery非常非常陌生，并且一天中的大部分时间都在做这方面的教程，似乎我错过了一些东西。

有人知道我哪里错了吗？