如何使用jQuery UI范围Slider更改变量的值

时间:2017-07-17 00:46:58

标签: javascript jquery

想象一下,我有setInterval

setInterval(function() {
    console.log("Hi");
}, 1000);

想象一下,我有setInterval和随机函数,每次调用都会生成随机数。

setInterval(function() {
        console.log("Hi");
    }, 1000 + Math.random() * 4000);

它会在1到4秒之间调用setInterval

现在我想要的是使用那种滑块来改变整数的值: https://jsfiddle.net/qetwstkb/

我想通过使用滑块来操纵这些值。 :) 无法解释,最好不是以英语为母语的人,抱歉。 > _<

1 个答案:

答案 0 :(得分:0)

要获取所选范围值,您可以使用:

var min = $("#slider").slider("values")[0];
var max = $("#slider").slider("values")[1];

要在值更改时执行回调函数,请使用slide选项。

获得值后,您可以将这些值放在任何位置,包括setInterval函数。

$(document).ready(function() {

$(function(){

  var update = function() {
    var min = $("#slider").slider("values")[0];
    var max = $("#slider").slider("values")[1];
    
     var i = setInterval(function() {
        console.log("Hi");
    }, min + Math.random() * max);
    
    return i;
  }
  
  var i;
  
  $("#slider").slider({
    values: [1000, 1750],
    min: 500,
    max: 3900,
    step: 0.1,
    slide: function (e, ui) {
      clearInterval(i);
      i = update();
    }
    
  });
  
});

});
<link href="https://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>