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

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

currently i'm using default jquery slider alter values within map in jvectormap, due limited styling options i'm forced switch slider. here's code of 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 found different slider (ionrangeslider: http://www.spicyjquery.com/demo,34.html) fits needs, doesn't work same default jquery slider, loses functionality. here's code of ionrangeslider:

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

to alter values on slide ionrangeslider should utilize onchange function according slider's documentation:

// callback called on every slider alter onchange: function (obj) { console.log(obj); }

so want now, utilize ionrangeslider alter values on jvectormap. interpretation like:

$("#ion_slider").ionrangeslider({ value: val, min: 2002, max: 2012, step: 1, type: 'single', hasgrid: true, // callback called on every slider alter onchange: function ( event, ui ) { val = ui.value; mapobject.series.regions[0].setvalues(data.states[ui.value]); checkdata(val); } });

but - ofcourse - it's returning error ui undefined.

my guess has jquery ui, yet included in page:

anyone has thought on how around this? sorry i'm totally new this.

from documentation:

onchange: triggered live slider value changed. returns object slider values.

so, function should this:

onchange: function (obj) { // stuff here }

where obj contains values. don't know in format, though, seek this:

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

and see gives you. then, extract value accordingly.

javascript jquery jquery-ui slider