jQuery滑块上的外部值更改

Question

I have this code that uses jQuery range(sliders) and returns the starting and the limit value of the range in two text boxes. 我有这段代码使用jQuery range（sliders）并在两个文本框中返回范围的起始值和极限值。 This function works fine. 此功能工作正常。

 function sliderRange () {
    var player = document.getElementById("audio-player");
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: player.duration,
        values: [0, player.duration],
        slide: function (event, ui) {
            $("#slider-value1").val(ui.values[0]);
            $("#slider-value2").val(ui.values[1]);
        }
    });
    $("#slider-value1").val($("#slider-range").slider("values", 0));

    $("#slider-value2").val($("#slider-range").slider("values", 1));

I have this function, given the input in the text boxes,changes the sliders position: 考虑到文本框中的输入，我具有此功能，可更改滑块位置：

$("input.slider-value").change(function () {
    var $this = $(this);
    $("#slider-range").slider("values", $this.data("index"), $this.val());
});

My problem is that even though, it changes the sliders position to the new values, it doesn't update the value so my other functions ignore the new range and still use the old or the initial one to get data. 我的问题是，即使将滑块位置更改为新值，也不会更新该值，因此我的其他函数会忽略新范围，仍然使用旧的或初始的范围来获取数据。 Does anyone know how to handle this? 有人知道如何处理吗？

Answer 1

In general your code looks good, you might have forgotten to define data-index attributes with your input-fields that are used to change either the value1 or value2 while a input-field is changed ( change ). 通常，您的代码看起来不错，您可能忘记了使用输入字段定义data-index属性，这些输入字段用于在更改输入字段（ change ）时更改value1或value2 。

I provided a similar example that I hope will help you: 我提供了一个类似的示例，希望对您有所帮助：

 function sliderRange() { $('#slider').slider({ range: true, min: 0, max: 10, values: [ 0, 10 ], slide: function (event, ui) { $('#slider-value1').val(ui.values[0]); $('#slider-value2').val(ui.values[1]); } }); $('#slider-value1').val($('#slider').slider('values', 0)); $('#slider-value2').val($('#slider').slider('values', 1)); } sliderRange(); $('input.slider-value').change(function () { var $this = $(this); $('#slider').slider('values', $this.data('index'), $this.val()); });

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="slider"></div> <input type="text" id="slider-value1" class="slider-value" data-index="0"/> <input type="text" id="slider-value2" class="slider-value" data-index="1"/> </body> </html>

jQuery滑块上的外部值更改

问题描述

1 个解决方案

解决方案1
0 2018-04-25 15:42:04

jQuery滑块上的外部值更改

问题描述

1 个解决方案

解决方案1 0 2018-04-25 15:42:04

解决方案1
0 2018-04-25 15:42:04