I have implemented the Bootstrap-slider plugin from https://github.com/seiyria/bootstrap-slider using version 10 (also tested with v11) in my code:
/* Enhancing style - Bootstrap slider used */
$('.bs_sliders').each(function () {
var id = '#' + $(this).attr('id');
if (typeof window[id] !== 'undefined') {
window[id].slider('destroy');
delete window[id];
}
// Using ID selector as .on requires it
window[id] = $(id).slider({
formatter: function (value) {
return value;
},
}).on('change', function (ev) {
$(this).closest('li').find('.rangeUpdate').val($(this).val());
$(this).closest('li').find('.continuing_eval').removeClass('continuing_eval');
autoSave();
})
})
My goal is to destroy and re-initialize a slider if it already exists. However, I noticed that when the range values are set from 0-100, the slider only goes up to 10 even though the input data is correct:
<input type="text" name="54_slider" value="22" class="bs_sliders elRes" id="54_slider" data-slider-id="54_slider"
data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="22"
data-slider-handle="custom"
data-slider-rangeHighlights='[{"start":25,"end":26,"class":"grey_line"},{"start":50,"end":51,"class":"grey_line"},{"start":75,"end":76,"class":"grey_line"}]' />
<input type="text" value="22" class="rangeUpdate" data-toggle="popover" data-trigger="manual"
data-content="The permitted value range is 0-100" style="--my-content:'Undefined';" />
Furthermore, the custom elements like divider lines are not being recognized either. How can I ensure that all custom elements and attributes are picked up when a bs-slider is reinitialized?