Question

开始查看API for the slider，有点困惑。我有一个简单的表单，有一个输入，进入包含滑块的“结果”页面。当用户滑动滑块手柄时，值会更改（意味着最终值在函数中计算 - 输入被添加到数字中）

现在，我将滑块的值硬编码，但我希望该值是原始表单输入的实际值。不确定如何完成，但这是我正在使用的功能：

$(function() {
    $("#ds1").slider({
        orientation: "horizontal",
        step: 7,
        range: "min",
        max: 200,
        value: 50,
        slide: refreshTotal,
        change: refreshTotal
    });
});

因此该值被硬编码为50，但我想要一个输入字段来控制该值。 refreshTotal函数处理实际计算。如果以与此相同的方式处理，也可以设置最大值。

我在这里搜索并发现了一些“实时”输入影响滑块的例子，反之亦然，使用keyup等。但我无法弄清楚如何设置值（可能使用getter），基于用户点击提交后的表单输入字段，JQuery处理计算。

我认为这是一件非常简单的事情，似乎无法弄明白。

Answer 1

我将假设你从原始表单中获得了输入字段的值。由于您没有提到后端语言，因此在PHP中如何执行此操作的示例代码如下所示：

<? $value = $_POST['slider_value']; ?>
var slider_value = <? echo $value; ?>;

然后，您可以在您提到的API文档中使用选择器：

$( "#ds1" ).slider( "option", "value", slider_value);

您可以用类似的方式处理滑块的最大值：

$( "#ds1" ).slider( "option", "max", insert_number_here);

Answer 2

这假定jQuery＆amp; jQuery UI。

$(function () {
    var $slider = $('#slider').slider();
    var $input_a = $('#input_a');

    // Set slider value
    $input_a.on('keyup', function () {
        $slider.value($(this).val());

    // Default slider
    }).trigger('keyup');

    // Set input value
    $slider.change(function () {
        $input_a.val($(this).value());
    };
});

如何根据表单提交的输入字段设置JQuery滑块的值？

2 个答案: