Jquery ui滑块在手动输入时自动更改

Question

这是我的 jquery ui 滑块的代码：

var slidervalue = 100;  
$(function () {
$( "#slider" ).slider({
range: "min",
value: 100,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );

slidervalue = ui.value;
}
});


$( "#amount" ).val( $( "#slider" ).slider( "value" ) );

});

这是我创建的一个额外功能，用于从我的交易标题中获取一个数字并计算节省并显示结果。

 function updateSlider() {

        $.each($('.coupontitle'),function(index,coupObj){

                if ($(coupObj).text().match(/(\d+)\%/i))
                {
                  var percent = $(coupObj).text().match(/(\d+)\%/i);

                  var savings = ((percent[1]*.01) * slidervalue).toFixed(0);

                  $('span',coupObj).html('Save: $'+savings);
                }
                else if ($(coupObj).text().match(/\$(\d+)/i))
                {
                    var percent = $(coupObj).text().match(/\$(\d+)/i);
                    var savings = ((percent[1]*.01) * 100).toFixed(0);               
                    $('span',coupObj).html('Save: $'+savings);      
                }

              });
    }

此代码与滑块一起正常工作。现在，当用户滑动滑块时，与滑块对应的量通过 ui.value 传递并传递给上述函数并进行计算。

但是，当我手动在文本框中输入一个值时，我希望滑块自动移动，并且我希望将该值传递给函数进行计算。现在，当手动输入金额时，输入值不会传递到函数中。

我希望滑块作为这个站点工作：http://www.chippmunk.com/

我遇到了这个 jsfiddle，它可以完成工作，但是当手动输入时，它不会将文本框值传递给我的函数以继续计算。

jsfiddle - http://jsfiddle.net/andrewwhitaker/MD3mX/

Answer 1

上面接受的答案非常有用，它适用于单值滑块。但是像我这样的人可能想知道如何控制Range Slider 中的两个值。 因此，如果我们使用范围滑块，我们需要将数组作为 值 传递，对于范围滑块，我们可以像这样处理它

var min_val = 0;
var max_val = 1000;

function minMaxControl(type) {
  if (type == 'min') {
    min_val = $('#min').val();
  } else if (type == 'max') {
    max_val = $('#max').val();
  }
  $("#slider-range").slider('values', [min_val, max_val]);
}

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 1000,
  values: [min_val, max_val],
  slide: function(event, ui) {
    $("#min").val(ui.values[0]);
    $("#max").val(ui.values[1]);

  }
});

您可以在此处查看完整的代码和演示。 https://jsfiddle.net/N4K1B/2tv9phke/1/

所以基本上在上面的答案中，滑块的单个参数是这样控制的：

$("#slider").slider("value",this.value);

对于范围滑块，我们不是传递单个值，而是传递一个包含两个值的数组，如下所示：

$("#slider-range").slider('values', [min_val, max_val]);

如果有人仍在使用 jquery-ui 滑块，希望这个答案可能对某人有所帮助。 更多内容请参考documentation

Answer 2

这会起作用，不过我会将 $-sign 从输入中移出。

http://jsfiddle.net/Rusln/MD3mX/847/

$("#slider").slider({
    range: "min",
    value: 1,
    step: 1000,
    min: 0,
    max: 5000000,
    slide: function (event, ui) {
        $("input").val(ui.value);
    }
});
$("input").change(function () {
    $("#slider").slider("value",this.value);
});

更新

http://jsfiddle.net/Rusln/KLj6Z/

$("#slider").slider({
    range: "min",
    value: 1,
    step: 1,
    min: 0,
    max: 100,
    slide: function (event, ui) {
        $("input").val(ui.value);
    }
});
$("input").on("keyup",function(e){
     $("#slider").slider("value",this.value);
});