Error when refreshing slider

[dchacke]

$('#foo').slider({ ticks: [1,2,3] });

So far so good, slider appears and works. Then:

$('#foo').slider('setAttribute', 'ticks', [1,2,3,4]);
$('#foo').slider('refresh');

Error:

Uncaught TypeError: Cannot read property 'style' of undefined
    at Slider._layout (http://localhost:5555/node_modules/bootstrap-slider/dist/bootstrap-slider.js?1488426876276:1250:20)
    at Slider.setValue (http://localhost:5555/node_modules/bootstrap-slider/dist/bootstrap-slider.js?1488426876276:901:10)
    at Slider.createNewSlider (http://localhost:5555/node_modules/bootstrap-slider/dist/bootstrap-slider.js?1488426876276:725:9)
    at Slider.refresh (http://localhost:5555/node_modules/bootstrap-slider/dist/bootstrap-slider.js?1488426876276:1002:21)
    at jQuery.fn.init.$.fn.(anonymous function) [as bootstrapSlider] (http://localhost:5555/node_modules/bootstrap-slider/dist/bootstrap-slider.js?1488426876276:162:44)
    at <anonymous>:1:11

See reproduction here: http://jsbin.com/cetoguxapu/2/edit?html,output - open your browser's console (not the JSbin console) and refresh the page to see the erorr.

[cptc35]

I have this bug too. Slider ticks elements creating only when slider init. Ticks doms must create after ticks object filled.

[tzachshabtay]

Is there any workaround for this? Trying to update tick labels and positions dynamically but it doesn't work. I also tried recreating the slider completely (as illustrated here: https://github.com/seiyria/bootstrap-slider/issues/714), but even that seems to ignore my new tick labels.

[mrdnote]

I can confirm this. After refresh or relayout the slider looks corrupted:

[sferoze]

Please post a workaround if found. I need to dynamically change the ticks and seem to be limited because of this bug

[mrdnote]

This is my workaround:

$('#MySlider').bootstrapSlider('destroy'); // workaround for bootstrapslider bug, after destroying the slider cannot be recreated on the old input: we have to replace the input to make it work replaceElement($('#MySlider')); $('#MySlider').bootstrapSlider({ ... snip ... });

function replaceElement($elem) { var html = $elem[0].outerHTML; var parent = $elem.parent(); $elem.remove(); $(html).appendTo(parent); }

[akarupt]

Any update?

[tonyhogben]

Any update?

[viceice]

I've analysed the problem:

This if is true https://github.com/seiyria/bootstrap-slider/blob/a5fc012f717e31d292b8a837b2ba9ec9dcd8aa80/src/js/bootstrap-slider.js#L454-L456

so he doesn't come to https://github.com/seiyria/bootstrap-slider/blob/a5fc012f717e31d292b8a837b2ba9ec9dcd8aa80/src/js/bootstrap-slider.js#L516

I think the ticks creation must be moved to a seperate function and be called from here too:

https://github.com/seiyria/bootstrap-slider/blob/a5fc012f717e31d292b8a837b2ba9ec9dcd8aa80/src/js/bootstrap-slider.js#L738-L746

otherwise it will crash on line L1356 because this.options.ticks.length and this.ticks.length differ.

https://github.com/seiyria/bootstrap-slider/blob/a5fc012f717e31d292b8a837b2ba9ec9dcd8aa80/src/js/bootstrap-slider.js#L1348-L1356

@jespirit This would be a big change. I currently simply destroy and recreate the slider as a workaround.

[jespirit]

@ViceIce You're right. It's not possible to change the ticks[] nor the tick labels on a refresh.

Workaround:

I currently simply destroy and recreate the slider as a workaround.

This behaviour could be changed in a future release. Thoughts @rovolution?