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>
最佳答案
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>
关于javascript - 将 noUISlider 的最小/最大值保存到变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45223208/