ボタンをクリックして ion.rangeSlider コンポーネントから低い値と高い値を取得するにはどうすればよいですか?
これは私の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>
これが解決策です: 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);
// 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;
http://jsfiddle.net/2qLum6s7/ で解決策を参照してください。 Ion.RangeSlider(2.1.2)の最新バージョンで動作します。
以前の回答は古いプラグイン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);
JQueryのdata()メソッドを使用します。
var low = $('#range_1').data().from;
var high = $('#range_1').data().to;
const range = $('#range_1');
const rangeData = range.data('ionRangeSlider');
const start = rangeData.result.from;
const max = rangeData.result.max;
// rangeData.result['property']
バージョン2.3.0(テスト済み)
var val = $('#theSpecificSliderID').slider('value'); // Get value <br>
$('#theSpecificSliderID').slider('value', 33); // Set value
オーバーロードの開始、変更、または終了を使用します。私はfinishオーバーロードを使用して、値を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);
}
});