Ion.RangeSlider。解析值的问题答案

【问题标题】：Ion.RangeSlider. Problem with parsing a valueIon.RangeSlider。解析值的问题
【发布时间】：2021-05-28 09:16:26
【问题描述】：

我有 JS-Range 滑块。我需要从输入中获取最小值和最大值，但是当我移动滑块时在控制台中出现错误：无法解析指定的值“1000;2327”，或者超出范围。”等等

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

为什么会这样？

$(".js-range-slider").ionRangeSlider({
    type: "double",
    prefix: '$',
    min: 100,
    max: 4000,
    from: 1000,
    to: 2000,
    values: [75, 300000]
});



$(".filter-btn_send").click(function () {
    var min = $(".js-range-slider").slider("option", "min");
    var max = $(".js-range-slider").slider("option", "max");

    console.log("min: " + min + " max: " + max);
});

【问题讨论】：

您在代码中的什么地方遇到了这个问题？在 console.log 中还是在某些情况下？
在 console.log() 中
这种情况不知道怎么办，解析有点问题……
@riffnl l 发布了一个截图，打开页面后立即出现问题。
我添加了“某种答案”，也看看我在编辑中添加的其他解决方案

标签： javascript jquery

【解决方案1】：

您使用的方法有两个问题；

1 - 您在事件中再次将滑块重置为滑块和

2 - 你实际上并没有“得到”那个值。

最好的选择（就我现在所见）是从 onChange 函数中更改您想要使用的值（发送或其他东西）。像这样：

let minVal;
let maxVal;
$(".js-range-slider").ionRangeSlider({   
  type: "double",
  prefix: '$',
  min: 100,
  max: 4000,
  from: 1000,
  to: 2000,
  values: [75, 300000],
  onChange: function (data) {
    minVal = data.from;
    maxVal = data.to;
  }
});

以上内容未经测试，但应该是类似的内容。第二（回到第一条评论） - 你“重新分配”滑块，当你初始化滑块时，它应该是这样的：

let slider = $(".js-range-slider").ionRangeSlider({ // etc

然后（如果可能的话）您可以使用该“滑块”作为您的值的容器，例如：

let maxVal = slider.to;

编辑：也看看这里：How to get values from JQuery - IonRangeSlider?（可能重复）

【讨论】：

让滑块 = $(".js-range-slider").ionRangeSlider() ？为什么，如果我有 maxVal 和 minVal，以及 Event: onchange()。我得到了这些变量的值，但我得到了这些消息。
我不太明白为什么需要像以前一样定义相同的 ioRangeSlider：let slider = $(".js-range-slider").ionRangeSlider({ type: "double", prefix: '$', min: 100, max: 4000, from: 1000, to: 2000, values: [75, 300000], onChange: function (data) { minVal = data.from; maxVal = data.to; }
您不需要“重做”或“重新定义”滑块 - 这就像初始滑块一样，但附加了一个变量
我会看看你提交给我的主题
由于某种原因，在最新版本中没有一个解决方案适合我：v 2.3.1

【解决方案2】：

已在 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"/>

【讨论】：