使用幻灯片功能中的jQuery ui参数的jQuery自定义滑块（？）

debugcn 发表于 Dev

百叶窗灌木

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

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

现在，我发现了另一个完全适合我需要的滑块（ionRangeSlider：http : //www.spicyjquery.com/demo,34.html），但它与默认的Jquery滑块不同，因此失去了功能。这是ionRangeSlider的代码：

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

要使用ionRangeSlider更改幻灯片上的值，我应该根据滑块的文档使用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有关，但它包含在页面中：在此处输入图片说明

任何对如何解决这个问题有想法的人吗？对不起，我对此完全陌生。

百叶窗灌木

谢谢大家，我设法解决了这个问题。这是我所做的：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。