0

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

现在，我已经硬编码了滑块的值，但我希望该值是来自原始表单输入的实际值。不知道如何完成，但这是我正在使用的功能：

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

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

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

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

4

2 回答 2

0

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

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

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

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

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

$( "#ds1" ).slider( "option", "max", insert_number_here);
于 2012-10-24T21:59:50.330 回答
0

这假设 jQuery 和 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());
    };
});
于 2012-10-24T22:05:13.640 回答