Блог

В настоящее время я использую ползунок 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);
      }
    });
  

Но, конечно, он возвращает ошибку, что пользовательский интерфейс не определен.

Я предполагаю, что это связано с пользовательским интерфейсом Jquery, но оно включено в страницу:

У кого-нибудь есть идеи о том, как обойти это? Извините, я совершенно новичок в этом.

Спасибо, ребята, мне удалось это исправить. Это то, что я сделал:

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

Из документации:

onChange: Triggered live as the slider value is changed. Returns object with all slider values.

Итак, ваша функция должна быть такой:

 onChange: function (obj) {
    // do stuff here
}
  

Где obj содержатся ваши значения. Я не знаю, в каком формате, поэтому попробуйте это:

 onChange: function (obj) {
    console.log(obj);
}
  

и посмотрите, что это вам дает. Затем извлеките свое значение соответствующим образом.