Создание слайдера динамического диапазона в django и javascript, но он не работает

Я пытаюсь сделать слайдер динамического диапазона, но ничего не получается. Я знаю базовый Javascript. Я хочу сделать слайдер типа такого Если я изменяю цену серверов, изменяя число в слайдере, он будет показывать сервера, чья цена остается неизменной.

Вот изображение

Шаблон Django

<div class="form-group numeric-slider">
    <div class="numeric-slider-range ui-slider ui-slider-horizontal ui-slider-range"></div>
        <span class="numeric-slider-range_text" id='st_text'>
        </span>
        <input type="range">
</div>

{% for i in page_obj %}
...      
{% endfor %}

<script>
        $(function () {
            $(".numeric-slider-range").slider({
                range: true,
                min: 0,
                max: "{{ page_obj.paginator.count }}",
                slide: function (event, ui) {
                    $("#" + $(this).parent().attr("id") + "_min").val(ui.values[0]);
                    $("#" + $(this).parent().attr("id") + "_max").val(ui.values[1]);
                    $("#" + $(this).parent().attr("id") + "_text").text(ui.values[0] + ' - ' + ui.values[1]);
                },
                create: function (event, ui) {
                    $(this).slider("option", 'min', $(this).parent().data("range_min"));
                    $(this).slider("option", 'max', $(this).parent().data("range_max"));
                    $(this).slider("option", 'values', [$(this).parent().data("cur_min"), $(this).parent().data("cur_max")]);
                }
            });
            $("#" + $(".numeric-slider").attr("id") + "_min").val($(".numeric-slider").data("cur_min"));
            $("#" + $(".numeric-slider").attr("id") + "_max").val($(".numeric-slider").data("cur_max"));
            $("#" + $(".numeric-slider").attr("id") + "_text").text(ui.values[0] + ' - ' + ui.values[1]);
        });

</script>

def index(request):
    headers = {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36",
        "Accept-Encoding": "*",
        "Connection": "keep-alive"
    }
    url = "https://www.hetzner.com/a_hz_serverboerse/live_data.json"
    response = requests.get(url, headers=headers)
    data = response.json()['server']
    p = Paginator(data, 20)
    pn = request.GET.get('page')
    page_obj = p.get_page(pn)
    context = {
        'data': data,
        'page_obj': page_obj,
    }
    return render(request, 'index.html', context)

Мне нужен ответ как можно скорее, спасибо!

Вернуться на верх