Question

我在一个表单中使用noUiSlider，该表单将所选值发送到两个输入字段，然后通过表单提交。

这样可以正常工作但是当提交表单并显示结果时，输入字段和滑块默认返回原始值而不是保留以前选择的。

以下是代码：

function leftValue(value, handle, slider) {
    $(this).text(handle.parent()[0].style.left);
}
$("#slider").noUiSlider({
    connect: true,
    snap: true,
    start: [0, 1000],
    range: {
        'min': 0,
        '10%': 100,
        '20%': 200,
        '30%': 300,
        '40%': 400,
        '50%': 500,
        '60%': 600,
        '70%': 700,
        '80%': 800,
        '90%': 900,
        'max': 1000
    },
    serialization: {
        lower: [
            $.Link({
                target: $('#minprice')
            }),
        ],
        upper: [
            $.Link({
                target: $('#maxprice')
            }),
        ],
        format: {
            decimals: 0,
        }
    }
});


<div id="slider"></div>
  <input type="text" id="minprice" name="minprice">
  <input type="text" id="maxprice" name="maxprice">
</div>

Answer 1

在noUISlider版本7中，序列化已被Link替换。

查看以下代码

    container.noUiSlider({
        range: {
            'min': min,
            'max': max
        },
        step: step,
        start: initial,
        connect: 'lower',
        format: {
            to: function (value) {
                return value;
            },
            from: function(value) {
                return value
            }
        }
    });

    container.Link('lower').to(field);

相关文档在此处：http://refreshless.com/nouislider/linking-input-fields/

noUiSlider不保留值

1 个答案: