javascript - 在幻灯片函数中使用 jquery ui 参数的 jquery 自定义 slider (？)

Question

目前我正在使用默认的 Jquery slider 来更改 jVectormap 中 map 内的值，但由于样式选项有限，我不得不切换到另一个 slider 。这是工作的 Jquery slider 的代码:

    $(".slider").slider({
      value: val,
      min: 2002,
      max: 2012,
      step: 1,
      slide: function( event, ui ) {
        val = ui.value;
        mapObject.series.regions[0].setValues(data.states[ui.value]);
        checkData(val);
      }
    });

现在我找到了一个完全符合我需要的不同 slider (ionRangeSlider: http://www.spicyjquery.com/demo,34.html)，但它的工作方式与默认的 Jquery slider 不同，因此它失去了功能。这是 ionRangeSlider 的代码:

    $("#ion_slider").ionRangeSlider({
      value: val,
      min: 2002,
      max: 2012,
      step: 1,
      type: 'single',
      hasGrid: true
    });

要使用 ionRangeSlider 更改幻灯片上的值，我应该根据 slider 的文档使用 onChange 函数:

      // callback is called on every slider change
      onChange: function (obj) {
        console.log(obj);
      }

所以我现在想做的是使用 ionRangeSlider 更改 jVectormap 上的值。我的解释是这样的:

    $("#ion_slider").ionRangeSlider({
      value: val,
      min: 2002,
      max: 2012,
      step: 1,
      type: 'single',
      hasGrid: true,

      // callback is called on every slider change
      onChange: function ( event, ui ) {
        val = ui.value;
        mapObject.series.regions[0].setValues(data.states[ui.value]);
        checkData(val);
      }
    });

但是 - 当然 - 它会返回 ui 未定义的错误。

我的猜测是它与 Jquery UI 有关，但它包含在页面中:

有人知道如何解决这个问题吗？抱歉，我对此完全陌生。

Answer 1

谢谢大家，我已经解决了。这就是我所做的:

     $("#ion_slider").ionRangeSlider({
      value: val,
      min: 2002,
      max: 2020,
      step: 1,
      type: 'single',
      hasGrid: true,

      // callback is called on every slider change
      onChange: function ( obj ) {
        val = obj.fromNumber;
        console.log(val);
        mapObject.series.regions[0].setValues(data.states[val]);
        checkData(val);
      }
    });