如何从 JQuery - IonRangeSlider 获取值？答案

【问题标题】：How to get values from JQuery - IonRangeSlider?如何从 JQuery - IonRangeSlider 获取值？
【发布时间】：2014-12-25 18:53:50
【问题描述】：

如何通过单击按钮从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>

【问题讨论】：

标签： javascript jquery slider

【解决方案1】：

// 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)。

【讨论】：

@scahill 谢谢你对我帮助很大

【解决方案2】：

使用 jQuery 的 data() 方法：

var low = $('#range_1').data().from;
var high = $('#range_1').data().to;

【讨论】：

Jip，对我来说最短、最好的答案。我在调试时也认真考虑过这个问题，但是既然你给出了这个答案，+1

【解决方案3】：

这里有一个解决方案：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);

【讨论】：

这个例子已经过时了。
saveResult函数中的正确值：data.from和data.to

【解决方案4】：

以前的答案是基于旧的插件 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);

【讨论】：

【解决方案5】：

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 版（已测试）

【讨论】：

【解决方案6】：

var val = $('#theSpecificSliderID').slider('value'); // Get value <br>
$('#theSpecificSliderID').slider('value', 33); // Set value

【讨论】：

【解决方案7】：

使用开始、更改或结束重载。我正在使用完成重载并将值更新为 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);
        }
    });

【讨论】：

【解决方案8】：

此方法适用于最新版本。使用事件 onChange 从属性“from”和“to”获取数据。 Ion.RangeSlider v2.3.1：

    var slider = $('.js-range-slider');

    slider.ionRangeSlider({
        type: "double",
        prefix: '$',
        grid: true,
    });


    slider.on("change", function () {
        var $inp = $(this);
        var from = $inp.data("from");   // get data from attribute
        var to = $inp.data("to");       // get data from attribute

        console.log(from, to);          
});

HTML 标记：

<input type="text" class="js-range-slider" name="my_range" value="" data-min="100" data-max="4000" data-from="1000" data-to="2000"/>

【讨论】：