jquery - Django 模板中的 JQuery 滑块

Question

我正在尝试在 Django 模板中添加一个 JQuery 滑块，但它不起作用......

我的主要模板：

...
<div>
<dt class="nav-header">Size</dt>
    <dd>
        {% include 'catalogue/slider_size.html' %}
    </dd>
</div>
...

模板 slider_size.html ：

<link rel="stylesheet" href="slider.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500,
    values: [ 75, 300 ],
    slide: function( event, ui ) {
      $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
    }
  });
  $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
    " - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>

控制台中的错误：

控制台中的错误

有任何想法吗？先感谢您。

标签： jqueryhtmldjangojquery-ui