The tick labels are not correctly positioned when the slider is used in a Bootstrap Nav tabs

[pgksunilkumar]

[pgksunilkumar]

I have a temporary solution to a problem which I am working on. For better understanding, I am sharing the Code.

CSS Code : .slider.slider-horizontal .slider-tick-label-container .slider-tick-label{ width: 35 !important; }

Kindly request someone to help with the permanent solution in javascript

[seiyria]

please provide a jsfiddle so we can see your environment

[sergproua]

JSFiddle here, 4 tabls with a slider on each tab, initial tab always renders correctly https://jsfiddle.net/sergpro/126mebfm/

[pgksunilkumar]

thanks for sharing the jsfiddle sergproua

may be if you need urgent use this jsfiddle but it is temporary solution

https://jsfiddle.net/pgksunilkumar/126mebfm/17/

[sergproua]

Hi @pgksunilkumar, i tried your solution but it breaks positioning of the tick labels. Hi @seiyria, any chance of suggesting a true workaround for this? Thanks!

[seiyria]

Unfortunately, I mostly just maintain the repo and act as a first responder to filter out issues. Sorry!

[sergproua]

hi, since the example is already provided can labels be changed to bug, etc? Hoping this would get more attention.

[rovolution]

@sergproua we would welcome a PR to address this. thanks!

[Shnoulle]

I think it happen each time an slider start hidden, width (and height) have issue with hidden element or elements inside an hidden element. Think a shown.bs.tab event call can do the trick.

Easy workaround : do the slider only when needed : https://jsfiddle.net/nc7s2qf9/

[sergproua]

I've revised the example where refresh method is called on a slider - https://jsfiddle.net/sergpro/126mebfm/ Reaching out to jQuery/Bootstrap experts who knows how to make Slider refresh when component is hidden/shown

[cbj4074]

Perhaps I am overlooking something obvious here, but everything (that I've tried) seems to work simply by wrapping the slider initialization within Bootstrap's shown.bs.tab event handler:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#ex1').slider({
        formatter: function(value) {
            return 'Current value: ' + value;
        }
    });
})

I'm able to switch tabs without issue, and the slider properties are retained between tab-switches. I even have two sets of tabs (each wrapped in an accordion) and everything still works fine...

[michaelvaneck]

Maybe a little late but I had the same problem.

What fixed it for me was when a parent had the "display: none" attribute. If you hide something do it with JQuery, this fixed it for me!