Question

我正在尝试更改文本框值的UI滑块值，但slider方法似乎对文本框的change事件没有任何作用。我做错了什么？

$(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [0, 500],
            slide: function (event, ui) {
                $("#MinimumPrice").val(ui.values[0]);
                $("#MaximumPrice").val(ui.values[1]);
            }
        });
        $("#MinimumPrice").val($("#slider-range").slider("values", 0));
        $("#MaximumPrice").val($("#slider-range").slider("values", 1));

        //Change slider value from textbox 
        $("#MinimumPrice").change(function () {
            var value = $("#MinimumPrice").val();
            console.log(value);
            $("#slider-range").slider('value', value);
        });
    });

HTML如下：

<div id="Price" class="main_filter" name="filterDiv">
    <h4>Price</h4>
    <div id="slider-range"></div>
    <span class="">
        <br />
        <h4>Price Range</h4>
        <br />
        <div style="border: 1px solid #ccc;border-radius: 4px;width:100%;text-align: center;">
            <div class="input-group" style="width: 40%;float: left;">
                <span class="input-group-addon">$</span>
                <input id="MinimumPrice" maxlength="6" name="MinimumPrice" style="border:0;width: 50%" type="text" value="" />
            </div>
            <span style="width: 20%;float: left;">to</span>
            <div class="input-group" style="width: 40%">
                <input id="MaximumPrice" maxlength="6" name="MaximumPrice" style="border:0;width: 50%" type="text" value="" />
            </div>
        </div>
    </span>
</div>

检查小提琴Here

Answer 1

$("#MinimumPrice").on('change', function () {
    var value = $("#MinimumPrice").val();
    console.log(value);
    $("#slider-range").slider('values', 0, value);
});
$("#MaximumPrice").on('change', function () {
    var value = $("#MaximumPrice").val();
    console.log(value);
    $("#slider-range").slider('values', 1, value);
});

Answer 2

它不起作用，因为jQuery UI依赖于jQuery而你没有包含资源。你的代码是对的。

//Change slider value from textbox 
$("#MinimumPrice").on('change', function () {
    var value = $("#MinimumPrice").val();
    $("#slider-range").slider('values', 0, value);
});
$("#MaximumPrice").on('change', function () {
    var value = $("#MaximumPrice").val();
    console.log(value);
    $("#slider-range").slider('values', 1, value);
});

选中JSFiddle。

<强>更新
只是为了澄清，你包括jQuery UI但不包括jQuery 您可以找到所需的托管库here。你也可以download。

尝试回答有关为什么代码的某些部分有效以及有些代码无法解决的问题，我真的不知道，但我猜有些jQuery UI函数使用的是纯粹的javascript并且不依赖在jQuery上。

带有文本框输入的jquery滑块

2 个答案: