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

Question

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.

ui is not jQuery ui. It is the second parameter passed to your onChange function. Read the documentation, and find out what it is. — Bluefire
– Bluefire, Commented Jun 22, 2014 at 9:11
onchange requires only 1 parameter ionden.com/a/plugins/ion.rangeSlider/en.html — Jain
– Jain, Commented Jun 22, 2014 at 9:14

luikstruik · Accepted Answer · 2014-06-22 09:27:51Z

2

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);
      }
    });

answered Jun 22, 2014 at 9:27

luikstruik

939 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bluefire · Accepted Answer · 2014-06-22 09:25:49Z

0

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.

answered Jun 22, 2014 at 9:25

Bluefire

14.2k24 gold badges79 silver badges121 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related