Problem changing rangeHighlights attribute after initialization

[fabiohaertel]

Hello!

Currently, it's not possible to update the 'rangeHighlights' attribute if the size of the array is different from the initial size.

If we have this:

<input id="ex1" data-slider-rangeHighlights='[{"start": 2, "end": 8}]' data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

And try to update the attribute like this:

var newRangedH = [{"start": 4, "end": 12}, {"start": 10, "end": 15}];
$('#ex1').bootstrapSlider('setAttribute', 'rangeHighlights', newRangedH);
$('#ex1').bootstrapSlider('refresh');

The following error happens:

Uncaught TypeError: Cannot read property 'style' of undefined

The initial size of 1 is not updated when the attribute changes. The error happens inside this condition:

if (this.rangeHighlightElements.length > 0 && Array.isArray(this.options.rangeHighlights) && this.options.rangeHighlights.length > 0) {
 }

I set up a fiddle to show the problem

http://jsfiddle.net/s9fttxdq/2/

Thanks for your attention!

[seiyria]

Thanks, I've verified that this does not work in this case.

[dchacke]

+1. Need a fix for this also.

[seiyria]

We're happy to have a PR for this if it's urgent.

[dchacke]

Ouch!

FYI, it's slightly different for me. I do

$(this.ref.nativeElement).bootstrapSlider('setAttribute', 'ticks', this.ticks);
$(this.ref.nativeElement).bootstrapSlider('setAttribute', 'ticks_positions', this.tickPositions);
$(this.ref.nativeElement).bootstrapSlider('refresh');

The error is thrown in line 1250 of the main js file:

this.ticks[i].style[this.stylePos] = percentage + "%";

So it looks like this.ticks[i] evaluates to undefined.

[harispp]

Is there any solution for this problem.