Question

我有一个输入元素，它是一个范围滑块，我想将其转换为具有下限和上限的滑块。虽然正在讨论，但此功能尚未针对范围实施。 As you can see this is a popular question

我的问题是，我检索滑块结果的方式似乎不再起作用，我不明白为什么。我的原始滑块的工作方式如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        <label for="slider">
            <input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
            stuff: <output name="sliderAmount" for="slider">0</output>
        </label>
    </form>
    <div id="stuff"></div>
    <script>
        amt = document.getElementById("slider");
        var amtChange = function () {
            document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
        };
        amt.onchange = amtChange;
    </script>
</body>
</html>

每次滑动条形图时，它都会使用新结果更新材质div。我希望能够使用jquery滑块执行相同的操作，但是使用范围更新stuff div。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 500,
                values: [75, 300],
                slide: function (event, ui) {
                    $("#amount").val(ui.values[0] + " - " + ui.values[1]);
                }
            });
            $("#amount").val($("#slider-range").slider("values", 0) +
                " - " + $("#slider-range").slider("values", 1));
        });
    </script>
</head>
<body>
    <form>
        <label for="amount">Price range:</label>
        <input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
        <div id="slider-range"></div>
    </form>
    <div id="stuff"></div>
    <script>
        amt = document.getElementById("amount");
        var amtChange = function () {
            document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
        };
        amt.onchange = amtChange;
    </script>
</body>
</html>

但是，这似乎无法从滑块输入中拉出范围。如果我在Chrome浏览器中进入jquery示例的控制台，我可以输入amt.value，它每次都会返回值。我在这里缺少什么？

Answer 1

只需触发change() input方法，同时更改其值。

试试这个：

DEMO：FIDDLE

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

Answer 2

您可以使用jQuery UI Range Slider的change事件。使用它并将更新的更改附加到下面的内容。

$(function () {
        var changes = '';
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val(ui.values[0] + " - " + ui.values[1]);
            },
            change: function (event, ui) {
                changes += '<div>' + ui.values[0] + " - " + ui.values[1] + '</div>';
                $("#stuff").html(changes);
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));

    });

从html输入获取值

2 个答案: