javascript - 将 noUISlider 的最小/最大值保存到变量

Question

boyz 我想知道是否可以获取最小值/最大值并将它们存储到一个变量中以便稍后使用？更具体地说，我需要一个最小/最大值的全局变量(？)。所以我可以在范围之外使用它。第二个问题是我需要访问它，而不更新 slider 。我的意思是我想要例如 console.log slider 的实际值而不需要移动 slider 。有人可以帮忙吗？就像我在这里所做的那样:https://codepen.io/Hatchling/pen/eRaELE但我想用下面的 slider 来做到这一点。

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>



<div id="slider">

</div>

Answer 1

I wonder if it's possible to get the min/max value and store them to a variable which I can use later? To be more specific I need a global variable(?) of min/max value. So I can use it out of scope.

我不知道如何解释这个问题。如果您问“如何声明全局变量”，那有点超出了本网站的范围 - 请阅读 JavaScript 作用域规则。

如果您询问“创建 slider 后如何访问和/或修改“范围”的当前值”，那么您应该能够使用 options property用于阅读，以及 updateOptions method用于设置。

请注意，虽然文档确实说 slider.noUiSlider.options 属性应该返回对选项对象的引用，但我无法验证该行为。如果这是您的用例所必需的，那么您可能需要直接与 noUiSlider 维护人员联系来解决问题。

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});

$("#getOptionsValue").click(function () {
  var sliderOptions = slider.noUiSlider.options;
  console.log("sliderOptions: ", sliderOptions);
});

$("#updateOptionsValue").click(function() {
  slider.noUiSlider.updateOptions({
    range: {
      min: 10,
      max: 500
    }
  }, false);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>



<div id="slider">

</div>

<button id="getOptionsValue">Get Slider Options (Broken?)</button>
<br/>
<button id="updateOptionsValue">Update Range to 10, 500</button>

The second problem is that I need to have access to it, without updating the slider. I mean I want for example console.log the actual value of the slider has without moving the slider at all.

get method 是吗？不满足吗？

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});

$("#getSliderValue").click(function () {
  var sliderValue = slider.noUiSlider.get()
  console.log("sliderValue: ", sliderValue);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>



<div id="slider">

</div>

<button id="getSliderValue">Get Slider Value</button>