Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我想知道是否可以获取最小/最大值并将它们存储到我以后可以使用的变量中？更具体地说，我需要一个最小/最大值的全局变量（？）。所以我可以在范围之外使用它。

我不确定如何解释这个问题。如果你问“如何声明一个全局变量”，这有点超出了本网站的范围 - 请阅读JavaScript范围规则。

如果你问，“创建滑块后如何访问和/或修改'范围'的当前值”，那么你应该可以使用options property进行阅读，{ {3}}用于设置。

请注意，虽然文档确实说slider.noUiSlider.options属性应该返回对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>

第二个问题是我需要访问它，而不更新滑块。我的意思是我想要例如console.log滑块的实际值没有移动滑块。

updateOptions 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>

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

1 个答案: