i have a jsfiddle.
https://jsfiddle.net/nacs2025/44mxnzbu/
Here is an input tag:
<div class="marging">
<input id="ex19" type="text" data-provide="slider"
data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
</div>
<br/>
<br/>
<button id="myButton">
OKAY
</button>
When I click the button I want to add the following attributes and also update the two that are already there:
'data-slider-min':"1",
'data-slider-max':"3",
'data-slider-step':"1",
'data-slider-value':"3",
'data-slider-tooltip':"hide"
I have this javascript which works partially.
var spanishLabels = ["Enero", "Febrero", "Marzo"];
var num = [1,2,3];
$('#myButton').click(function() {
$('.data-slider-ticks-labels').each(function(index) {
$(this).text(spanishLabels[index]);
});
$('.data-slider-ticks').each(function(index) {
$(this).text(num[index]);
});
$( "#ex19" ).attr({
'data-slider-min':"1",
'data-slider-max':"3",
'data-slider-step':"1",
'data-slider-value':"3",
'data-slider-tooltip':"hide"
});
});
What am I doing wrong, because the JS doesn't work well for me.
I was reviewing the documentation of Bootstrap Slider in detail and found the method
setAttribute()
that allows (in theory) to change the parameters of the slider, as well as the methodsrefresh()
andrelayout()
that in a certain way redraw the slider, however it did not work well for me (see Slider 2 in the example below).I thoroughly reviewed the Bootstrap slider code found on Github and after analyzing and testing it, I noticed that the ticks and ticks_labels as well as the tooltip are generated only when the slider is created and are never modified by the refresh or relayout methods.
In other words, the only way I found to modify the ticks and ticks_labels was destroying and recreating the slider, which doesn't seem logical to me (or there is something I didn't understand).