How to update tick labels after initialization in JS?

[paniwani]

Is there a way to update the tick labels for the slider after the slider has already been initialized in JS?

After the user interacts with a different portion of my app, I would like to change the tick label text. Is this possible? I tried using setAttribute() on the slider but ran into errors and I was not able to get it working.

[seiyria]

Have you tried using .setAttribute?

[paniwani]

Here's my initialization code:

$("#alphaSlider").slider({ id: "alphaSlider", min: 0, max: 1, step: 0.1, value: 0.5, ticks: [0, 1], ticks_labels: ["CT", "PT"], ticks_snap_bounds: 0 });

Then elsewhere in my code, I try to change the tick labels:

$('#alphaSlider').setAttribute("ticks_labels", ["CT", "MRI"]);

But I just get this error in the console:

Uncaught TypeError: $(...).setAttribute is not a function

[seiyria]

Try $('#alphaSlider').slider().setAttribute(...) and $('#alphaSlider').slider('setAttribute', ...).

[paniwani]

Uncaught TypeError: $(...).slider(...).setAttribute is not a function

It also reset my slider, losing all the parameters I set previously.

[seiyria]

Notice I posted a second one that might also work. Try that and let me know if that doesn't work. If it doesn't, as per normal request, please provide a jsfiddle.

[rbyrnes]

I can also confirm with paniwani that both methods described above do not work. I do not have a fiddle off-hand.

[ryanoglesby08]

+1. Agree. Resetting the ticks and ticks_labels does not appear to work. Even after calling slider.setAttribute(...) and slider.refresh().

Here is a jsfiddle demonstrating this bug: http://jsfiddle.net/mo6v9x7h/2/

[dessalines]

I'm having this problem too, trying to set the tooltip to show.

$(obj).bootstrapSlider('setAttribute','tooltip','show');

doesn't work.

[leadmitry]

$('#obj').slider('setAttribute', 'ticks_labels', [1,2,3,4,5,6]); $('#obj').slider('setAttribute', 'ticks', [1,2,3,4,5,6]); $('#obj').slider('refresh');

It does nothing.

[owenpt]

I've also tested and can confirm that there seems to be a problem here.

I tested setValue, and have that working fine, but setAttribute doesn't seem to work (using this syntax) - $('#exID').slider('setAttribute','tooltip','hide');

[nreynis]

This is fixed by adding that code in createNewSlider, near line 540:

if (updateSlider === true) {
    if (Array.isArray(this.options.ticks_labels) && this.options.ticks_labels.length > 0) { 
        for (i = 0; i < this.options.ticks_labels.length; i++) {        
            this.tickLabels[i].innerHTML = this.options.ticks_labels[i]
        }
    }
}

Tick labels will now be refreshed when calling the method 'refresh'.

[SimmerChan]

@ywg it works for me. Thanks indeed!

[rovolution]

We would appreciate a PR to fix this!

[OnekO]

Fixed here: https://github.com/OnekO/bootstrap-slider/commit/b99bbff58f028d3b3331bc4fa8877023d8f1d674

Not enough testing for PR, apparently working ok.

[mmaday]

I've been able to work around this problem by triggering a resize event which will cause a redraw.
window.dispatchEvent(new Event('resize'));

[JonasEc]

I am also having this problem and the proposed fix did the trick!

new problem: if I do this but ALSO want to change the ticks themselves, the new ticks_labels are spaced/placed where the OLD ticks would have been. Eg:

exampleSlider.slider().on('slideStop', function() { var val = exampleSlider.slider('getValue') exampleSlider.slider('setAttribute', 'ticks', ['7', '100','200', '250', '290']) exampleSlider.slider('setAttribute', 'ticks_labels', ['A', 'B','C', 'D', 'E']) exampleSlider.slider('refresh') exampleSlider.slider('setValue', val) });

[yidingalan]

@seiyria The $("#example").slider('setAttribute', 'ticks', [1, 2, 10]); still doesn't work. Is there a way to set the ticks after the initialization of the slider? Or it can only be set at creation?

[keywest1]

@seiyria I am still not able to change tick_labels with v 9.8.0:

$('#obj').slider('setAttribute', 'ticks_labels', ["x", "y", "z"]); $('#obj').slider('refresh');

See https://jsfiddle.net/50am4r24/ Is this the correct usage? Thanks!

[seiyria]

this bug is still open because it hasn't been addressed, please stop pinging me about it.

[haimca]

My work-around that worked for me:

$scope.mc_period_slider_ticks = [1, 60, 120, 180, 240, 360, 480, 600]; $scope.mc_period_slider_ticks_labels = ["1", "60", "120", "180", "240", "300", "360", "420"]; $scope.mc_period_slider_max = 420;

        var $slider = $('#mc-period-slider').parent();
        
        angular.forEach($slider.find('.slider-tick-label'), function (tick, index) {                
            $(tick).text($scope.mc_period_slider_ticks_labels[index]);            
        });

        $('#mc-period-slider').bootstrapSlider('setAttribute', 'max', $scope.mc_period_slider_max);            
        $('#mc-period-slider').bootstrapSlider('setAttribute', 'ticks', $scope.mc_period_slider_ticks);
        $('#mc-period-slider').bootstrapSlider('setAttribute', 'ticks_labels', $scope.mc_period_slider_ticks_labels);
        $('#mc-period-slider').bootstrapSlider('setAttribute', 'ticks_tooltip', false);      // important      
        $('#mc-period-slider').bootstrapSlider('refresh');
        $('#mc-period-slider').bootstrapSlider('setValue', parseInt(newValue));

`

[mastef]

I was able to make it work with this commit. https://github.com/OnekO/bootstrap-slider/commit/b99bbff58f028d3b3331bc4fa8877023d8f1d674

@seiyria - would that be a good candidate for a PR?

Only improvement I'd add would be to compare if the array differs with the previously supplied one. Maybe some array comparison like here https://stackoverflow.com/a/14853974/10728554 or here https://stackoverflow.com/a/19746771/10728554 and only re-apply the label ticks if arrays differ. But that's more of a performance optimization.

[seiyria]

If you can add a test for it and show me what this looks like (jsfiddle or similar), I would accept a PR. Thanks for your interest!