noUiSlider устанавливает значения при загрузке страницы

Question

noUiSlider устанавливает значения при загрузке страницы

0

Я использую noUiSlider в новом проекте.

У меня есть элемент внутри формы, который позволяет пользователю выбирать диапазон цены (мин и макс). Когда форма отправляется, оба значения используются в коде для фильтрации элементов диапазона между этими двумя выбранными ценами.

HTML/PHP:

<div id="m-price"></div>

<div class="field field-range">
    <input type="text" min="0" max="5000" step="100" id="price-min" name="price-min" value="<?php echo ($_POST['price-min']) ? $_POST['price-min'] : ''; ?>">
</div>

<div class="field field-range">
    <input type="text" min="0" max="5000" step="100" id="price-max" name="price-max" value="<?php echo ($_POST['price-max']) ? $_POST['price-max'] : ''; ?>">
</div>

JS:

$('#m-price').noUiSlider({
    range: {
        'min': 0,
        'max': 500
    }
    ,step: 100
    ,start: [0,500]
    ,connect: true
    ,serialization: {
        lower: [
            $.Link({
                target: $('#price-min'),
                format: {
                    decimals: 3,
                    mark: ','
                }
            })
        ],
        upper: [
            $.Link({
                target: $('#price-max'),
                format: {
                    decimals: 3,
                    mark: ','
                }
            })
        ]
    }
});

Теперь это работает отлично, однако у меня есть на элементах формы: "Если значение существует, установите значение для значения ввода формы" каждый раз, когда страница перезагружается (точно так же, как липкая форма, чтобы пользователь знал, что они искали).

Способ, которым работает noUiSlider, невозможен, поскольку элемент инициализируется при загрузке страницы, а значения задаются с помощью "start: [0,500]". Я заметил, что есть событие "set", но как я могу использовать его в этом сценарии?

Rob Morris 27 апр. 2014, в 12:27

Источник

Теги:

php

javascript

jquery

html

forms

1 ответ

Ещё вопросы

Lg102 · Accepted Answer · 2014-04-27T13-57-00.000Z

Это можно решить, установив значение для ползунка, а не на входы. В принципе, вы получите свою переменную из POST и получите ее в javascript:

<?php 
    $min = $_POST['price-min'];
    $max = $_POST['price-max'];
?>

<script>var startValues = [<?php
    echo isset($min) ? $min : 0;
?>, <?php
    echo isset($max) ? $max : 500;
?>];</script>

Теперь у вас есть значение для запуска слайдера с:

$('#m-price').noUiSlider({
    ...
    start: startValues 
    ...
});

Затем элементы Link будут записывать эти значения на входы или, если они не были установлены, по умолчанию будут начальные начальные значения 0 и 500.

Отлично спасибо. Однако мне пришлось добавить условное startValues чтобы startValues всегда ли $_POST['price-min'] и $_POST['price-max'] заданные как startValues всегда начинаются с 0.