Javascript 如何从JQuery-IonRangeSloider获取值？

如何通过单击按钮从组件获取低值和高值

这是我的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>

$（文档）.ready（函数（）{
$（“#范围_1”）.IonRange滑块({
民:10,，
最高：50，
起:10,，
致:20,，
类型：'double'，
步骤：1，
美化：是的，
hasGrid:错误
});
});
$（文档）.ready（函数（）{
$（“#获取_值”）。单击（函数（）{
变量低=$（'范围1'）？？？；
var高=$（'范围1'）？？？；
警报（低）；
});
});

这里有一个解决方案：

---

之前的答案是基于旧的插件API，不再有效。这是新版本，适用于2.x版本：

var val=$（'#指定滑动条'）。滑动条（'value'）；//获取值

$（'theSpecificSliderID'）。滑块（'value'，33）；//设定值

//启动插件
$（“#范围”）.IonRange滑块({
类型：“双”，
分:0,，
最高：1000，
起：200，
至：500
});
//将其实例保存到var
变量滑块=$（“#范围”）.data（“IonRangeSlaider”）；
//获取价值
var-from=slider.result.from；
var to=slider.result.to；

请参阅第页的解决方案。适用于最新版本的Ion.RangeSloider（2.1.2）。

使用jQuery的data（）方法：

---

使用启动、更改或完成重载。我正在使用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);
        }
    }); 

---

版本2.3.0（已测试）

此方法适用于最新版本。使用event onChange从属性“from”和“to”获取数据。 Ion.RangeSloider 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"/>

此示例已过时。saveResult函数中的正确值为：data.from和data。to@scahill谢谢你，它帮了我很大的忙，对我来说是最短、最好的答案。我在调试时也谈到了这一点，但既然你给出了这个答案，+1

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

   $("#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);
        }
    }); 

const range = $('#range_1');

const rangeData = range.data('ionRangeSlider');
const start = rangeData.result.from;
const max = rangeData.result.max;
// rangeData.result['property']

    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);          
});

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