如何使用 jQuery UI range Slider 更改变量的值答案

【问题标题】：How do i change value of variable by using jQuery UI range Slider如何使用 jQuery UI range Slider 更改变量的值
【发布时间】：2017-07-17 00:46:57
【问题描述】：

假设我已经设置了间隔

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

想象一下，我使用该随机函数设置了 setInterval，该函数将在每次调用时生成随机数。

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

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

现在我想要的是通过使用这种滑块来更改整数的值： https://jsfiddle.net/qetwstkb/

我想通过使用滑块来操作这些值。 :) 无法更好地解释它不是以英语为母语的人，对不起。 >_

【问题讨论】：

你的问题不清楚。 1）你想根据滑块更新变量，还是要根据变量创建滑块？ 2) 你有一个变量random 有一个值，但你说的是两个值。
您想要一个带有min: 5、max: 390 的滑块，以及在用户与滑块交互时根据滑块的值更新的变量吗？
那种。我想制作一个可以用于延迟更改的滑块，但是对我来说具有随机功能很重要。
5 和 390 的最小值和最大值是固定数量。想用随机值做什么？
我已经编辑了整个问题，希望现在可以理解了。

标签： javascript jquery

【解决方案1】：

要获取选定的范围值，可以使用：

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>

【讨论】：