CODEWITHSUNDEEP
javascriptjqueryjquery-uislider
luikstruik
luikstruik

Reputation: 93

jquery custom slider using jquery ui parameter in slide function (?)

Currently I'm using the default Jquery slider to change values within a map in jVectormap, but due to limited styling options I'm forced to switch to another slider. Here's the code of the working 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);
      }
    });

Now I found a different slider (ionRangeSlider: http://www.spicyjquery.com/demo,34.html) that perfectly fits my needs, but it doesn't work the same as the default Jquery slider, thus it loses functionality. Here's the code of ionRangeSlider:

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

To change values on slide with ionRangeSlider I should use the onChange function according to the slider's documentation:

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

So what I want to do now, is to use the ionRangeSlider to change values on the jVectormap. My interpretation would be something like:

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

But - ofcourse - it's returning an error that ui is undefined.

enter image description here

My guess is that it has to do with Jquery UI, yet it is included in the page: enter image description here

Anyone that has an idea on how to get around this? Sorry I'm totally new to this.

Upvotes: 1

Views: 1762

Answers (2)

luikstruik
luikstruik

Reputation: 93

Thank you guys, I managed to get it fixed. This is what I did:

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

Upvotes: 2

Bluefire
Bluefire

Reputation: 14099

From the documentation:

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

So, your function should be like this:

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

Where obj contains your values. I don't know in what format, though, so try this:

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

and see what it gives you. Then, extract your value accordingly.

Upvotes: 0

Related Questions