Question

我在我的新项目中使用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: ','
                }
            })
        ]
    }
});

现在这完全正常工作，但是，我在表单元素上有一个＆＃39;如果值存在，则将该值设置为表单输入值＆＃39;每次页面重新加载（就像一个粘性形式的东西，所以用户知道他们搜索了什么）。

noUiSlider的工作方式是不可能的，因为元素在页面加载时初始化，并且使用＆＃39; start：[0,500]＆＃39;设置值。我注意到有一套＆＃39;事件，但我如何在这种情况下使用它？

Answer 1

这可以通过将值设置为滑块而不是输入来解决。基本上，您可以从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的初始起始值。

noUiSlider在页面加载时设置值

1 个答案: