1

我正在尝试从函数外部的 Ion Range 滑块中获取所选值。但我得到的价值是不确定的。我使用了 Ion range Slider Plugin 和以下代码。

  function getValue()
  {
  $(".range-slider").ionRangeSlider({
       // type: "single",
        min: 80,
        max: 100,
        grid: true,
      
       onFinish: function (data) {
            // Called every time handle position is Finished
          var value = data.from;
        return value;
 //         console.log("Confidence: ",confidence);
     }
    });
    } 
    
    getValue();
    
    console.log("Value", getValue());

我不知道如何在函数之外获取范围选择值。这是我尝试过的小提琴：https ://jsfiddle.net/georgoboy/kxcmagjw/1/

4

2 回答 2

0

如果要检索范围滑块的初始值，可以使用：

console.log("Value",  $(".range-slider").val());

onFinish()-Function 应该用于响应用户的更改。

于 2020-12-22T07:37:56.940 回答
0

滑块的值只有在用户移动滑块后才能知道。发生这种情况时，将onFinish调用回调。然后，将该值作为参数传递给该函数。

为了将其从回调中取出，您可以更改 内部的某种全局变量onFinish，如下所示：

// This is where the updated value will be stored.
let currentValue = 0;

  $(".range-slider").ionRangeSlider({
       // type: "single",
        min: 80,
        max: 100,
        grid: true,
      
       onFinish: function (data) {
            // Called every time handle position is Finished
          var value = data.from;
          // Value is available here
          console.log("Value", value);
          currentValue = value;
 //         console.log("Confidence: ",confidence);
     }
    });

但是，这将没有用，因为您无法真正判断它何时更改，因此之后无法运行任何代码。更好的选择是使用“反应式”方法：sliderValueUpdated每次更新后调用函数并在那里做一些事情。

const sliderValueUpdated = (newValue) => {
  // Do something with the updated value here
  console.log("Value", value);
  // console.log("Confidence: ",confidence);
};

...
       onFinish: function (data) {
          // Called every time handle position is Finished
          var value = data.from;
          // Value is available here
          sliderValueUpdated(value);
     }
...

您可以在初始化后立即调用更新函数以计算初始值：

sliderValueUpdated($(".range-slider").val());
于 2020-12-22T07:38:43.587 回答