Javascript 如何从 JQuery - IonRangeSlider 获取值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26641024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get values from JQuery - IonRangeSlider?
提问by Gem
how can I get low and high values from ion.rangeSlidercomponent by clicking a button?
如何通过单击按钮从ion.rangeSlider组件获得低值和高值？
This is my jQuery code:
这是我的 jQuery 代码：
<script>
$(document).ready(function(){
$("#range_1").ionRangeSlider({
min: 10,
max: 50,
from: 10,
to: 20,
type: 'double',
step: 1,
prettify: true,
hasGrid: false
});
});
</script>
<script>
$(document).ready(function(){
$('#get_values').click(function(){
var low = $('#range_1').... ???;
var high = $('#range_1').... ???;
alert(low);
});
});
</script>
采纳答案by IonDen
here is a solution: http://jsfiddle.net/IonDen/xaaw56bk/
这是一个解决方案：http: //jsfiddle.net/IonDen/xaaw56bk/
var $range = $(".js-range-slider"),
$result = $(".js-result"),
$getvalues = $(".js-get-values"),
from = 0,
to = 0;
var saveResult = function (data) {
from = data.fromNumber;
to = data.toNumber;
};
var writeResult = function () {
var result = "from: " + from + ", to: " + to;
$result.html(result);
};
$range.ionRangeSlider({
type: "double",
min: 10,
max: 50,
from: from,
to: to,
onLoad: function (data) {
saveResult(data);
writeResult();
},
onChange: saveResult,
onFinish: saveResult
});
$getvalues.on("click", writeResult);
回答by Shari Cahill
// Launch plugin
$("#range").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500
});
// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");
// Get values
var from = slider.result.from;
var to = slider.result.to;
See solution at http://jsfiddle.net/2qLum6s7/. Works with latest version of Ion.RangeSlider (2.1.2).
请参阅http://jsfiddle.net/2qLum6s7/ 上的解决方案。适用于最新版本的 Ion.RangeSlider (2.1.2)。
回答by soheilpro
Use jQuery's data() method:
使用 jQuery 的 data() 方法：
var low = $('#range_1').data().from;
var high = $('#range_1').data().to;
回答by IonDen
Previous answer was based on old plugin API and don't work any more. Here is the new one, for 2.x version: http://jsfiddle.net/IonDen/2L15xoym/
先前的答案基于旧的插件 API，不再适用。这是 2.x 版本的新版本：http: //jsfiddle.net/IonDen/2L15xoym/
var $range = $(".js-range-slider"),
$result = $(".js-result"),
$getvalues = $(".js-get-values"),
from = 0,
to = 0;
var saveResult = function (data) {
from = data.from;
to = data.to;
};
var writeResult = function () {
var result = "from: " + from + ", to: " + to;
$result.html(result);
};
$range.ionRangeSlider({
type: "double",
min: 10,
max: 50,
from: from,
to: to,
onStart: function (data) {
saveResult(data);
writeResult();
},
onChange: saveResult,
onFinish: saveResult
});
$getvalues.on("click", writeResult);
回答by Andrii
const range = $('#range_1');
const rangeData = range.data('ionRangeSlider');
const start = rangeData.result.from;
const max = rangeData.result.max;
// rangeData.result['property']
Version 2.3.0 (Tested)
版本 2.3.0（已测试）
回答by Yat Fei Leong
Use the start, change or finish overload. I'm using finish overload and update the value to SomeValue element.
使用开始、更改或结束重载。我正在使用完成重载并将值更新为 SomeValue 元素。
$("#Range_1").ionRangeSlider({
min: 0,
max: 100,
type: 'single',
step: 1,
postfix: " %",
prettify: false,
hasGrid: true,
onFinish: function(data){
var value = data.fromNumber;
$("#SomeValue").val(value);
}
});
回答by Jai Kumar Rajput
var val = $('#theSpecificSliderID').slider('value'); // Get value <br>
$('#theSpecificSliderID').slider('value', 33); // Set value
