update when custom values

[Nickholas]

Great component. I am working with it for a few hours and is great. I had only see one issue: when you use custom values despite numbers, the update method doesnt work fine. Could anybody check it?

[IonDen]

Hi, if you work with values array, you should operate it as an array. Example: http://jsfiddle.net/IonDen/b61cadm6/ Is it fine now?

[Nickholas]

As you can see on the next image, i am using your control to display a rangeslider on the bottom of a char. I use that slider to filter the data dinamically:

The source of my values are an array like this: [2013 (T2),2013 (T3),2013 (T4),2014 (T1),2014 (T2)] which represents quarters but it can change by pressing another date range dimension (day, month, quarter, semester, year,...). So, if i change to semester i get the array [2013 (S1),2013 (S2),2014 (S1)]

I want to refresh your range-slider, every time user changes the date dimension. I have this code but doesnt works and the "update" function doesnt work too:

var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = myTimes[0]; //first element of the array var maxVal = myTimes[myTimes.length - 1]; //last element of the array

$('#time-slider').ionRangeSlider({ min: minVal, max: maxVal, from: minVal, to: maxVal, values: myTimes, type: 'double', hasGrid: true });

[IonDen]

Hi, to update range slider you should call it with "update" key:

$('#time-slider').ionRangeSlider("update", { ... });

[Nickholas]

Thanks IonDen. Do you mean something like this?

$('#btnDay').click(function() { var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = myTimes[0]; //first element of the array var maxVal = myTimes[myTimes.length - 1]; //last element of the array

 $('#time-slider').ionRangeSlider("update", {
         min: minVal,
         max: maxVal,
         from: minVal,
         to: maxVal,
         values: myTimes,
         type: 'double',
         hasGrid: true
 });

});

It doesnt seems to work for me. Should parameters (min, max, from, to) be just numbers? I mean indexes of array elements. I am using the element value instead the element index of an array. So, if i have understand you, i must use this code:

$('#btnDay').click(function() { var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = 0; var maxVal = myTimes.length - 1; //last element of the array

 $('#time-slider').ionRangeSlider("update", {
         min: minVal,
         max: maxVal,
         from: minVal,
         to: maxVal,
         values: myTimes,
         type: 'double',
         hasGrid: true
 });

});

[IonDen]

Hi. If you use values array. There is no more need of min and max. They will be set automaticly.

You should have to functions:

init: $('#time-slider').ionRangeSlider({

     from: beginFromVal,
     to: beginToVal,
     values: myTimes,
     type: 'double',
     hasGrid: true

});

update:

$('#time-slider').ionRangeSlider("update", {

     from: fromVal,
     to: toVal

});

2014-08-08 12:44 GMT+04:00 Nickholas notifications@github.com:

Thanks IonDen. Do you mean something like this?

$('#btnDay').click(function() {

var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = myTimes[0]; //first element of the array var maxVal = myTimes[myTimes.length - 1]; //last element of the array

$('#time-slider').ionRangeSlider("update", { min: minVal, max: maxVal, from: minVal, to: maxVal, values: myTimes, type: 'double', hasGrid: true });

});

It doesnt seems to work for me. Should parameters (min, max, from, to) be just numbers? I mean indexes of array elements. I am using the element value instead the element index of an array. So, if i have understand you, i must use this code:

$('#btnDay').click(function() {

var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = 0; var maxVal = myTimes.length - 1; //last element of the array

$('#time-slider').ionRangeSlider("update", { min: minVal, max: maxVal, from: minVal, to: maxVal, values: myTimes, type: 'double', hasGrid: true });

});

— Reply to this email directly or view it on GitHub https://github.com/IonDen/ion.rangeSlider/issues/107#issuecomment-51577136 .

Denis Ineshin | IonDen.com http://ionden.com

[IonDen]

fromVal and toVal - are the indexes of myTimes array.

2014-08-08 13:07 GMT+04:00 Denis Ineshin denis.ineshin@gmail.com:

Hi. If you use values array. There is no more need of min and max. They will be set automaticly.

You should have to functions:

init: $('#time-slider').ionRangeSlider({

     from: beginFromVal,
     to: beginToVal,
     values: myTimes,
     type: 'double',
     hasGrid: true

});

update:

$('#time-slider').ionRangeSlider("update", {

     from: fromVal,
     to: toVal

});

2014-08-08 12:44 GMT+04:00 Nickholas notifications@github.com:

Thanks IonDen. Do you mean something like this?

$('#btnDay').click(function() {

var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = myTimes[0]; //first element of the array var maxVal = myTimes[myTimes.length - 1]; //last element of the array

$('#time-slider').ionRangeSlider("update", { min: minVal, max: maxVal, from: minVal, to: maxVal, values: myTimes, type: 'double', hasGrid: true });

});

It doesnt seems to work for me. Should parameters (min, max, from, to) be just numbers? I mean indexes of array elements. I am using the element value instead the element index of an array. So, if i have understand you, i must use this code:

$('#btnDay').click(function() {

var myTimes = datos.getDistinctValues(0); //get values from a google.visualization.DataTable var minVal = 0; var maxVal = myTimes.length - 1; //last element of the array

$('#time-slider').ionRangeSlider("update", { min: minVal, max: maxVal, from: minVal, to: maxVal, values: myTimes, type: 'double', hasGrid: true });

});

— Reply to this email directly or view it on GitHub https://github.com/IonDen/ion.rangeSlider/issues/107#issuecomment-51577136 .

Denis Ineshin | IonDen.com http://ionden.com

Denis Ineshin | IonDen.com http://ionden.com

[Nickholas]

Ok, now i understand it.

My last question is about the array values. Should i use the "update" method to update the values array? For example, i want to change dinamically the array elements from [2013 (T2),2013 (T3),2013 (T4),2014 (T1),2014 (T2)] to these ones [2013 (S1),2013 (S2),2014 (S1)] or these others [2013, 2014] based on the user date dimension selection.

[IonDen]

Hi, updating values array on each update is a little buggy now. But i managed to made this example for you: http://jsfiddle.net/IonDen/b61cadm6/2/

[Nickholas]

Thanks IonDen. I discover my issue. If you inicialize the rangeslider without values, you can't make work the "update" method.

I solve it, initializing the values with some rubbish, like this way:

$('#time-slider').ionRangeSlider({ type: 'double', hasGrid: true, values: ["a", "b", "c", "d", "e", "f", "g"], from: 3, to: 5 });

If you dont asign anything, the update method will not work propertly.

[IonDen]

Hi, yes it was not designed to switch slider from normal mode to values mode on update.

[im-fortech]

to and from need to be indexes data-from=agg.index(from.to_f) data-to=agg.index(to.to_f)

[Giovancruz]

@IonDen, I updated your findle (http://jsfiddle.net/b61cadm6/11/) to understand what is this issue. If i understood, when you uses update, you need to use the index of array to set the new value, otherwise, it don't work, correct?

[IonDen]

@Giovancruz, yes. It uses indexes.