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

这样可行，我会将$ -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);
});

Answer 2

上面接受的答案非常有用，并且对于单值滑块也可以正常工作。但是像我这样的人可能会想知道如何控制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

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

2 个答案: