I get "$.fn.slider namespace is already bound" even if I use .bootstrapSlider() method

[dejudicibus]

Here is my code:

`$(document).ready(function () { var slider = $("#gen-1-slider").bootstrapSlider({ id: "gen-1-data", min: 50, max: 150, step: 10, value: 100, tooltip: "always" }); slider.on('slideStop', function(value) { scaleChart('#gen-1-chart', value/100); }); });

function scaleChart(chart, scale) { if (scale != null) { jQuery(chart).famDiagram({ scale: scale }); } jQuery(chart).famDiagram("update", primitives.orgdiagram.UpdateMode.Refresh); }`

Two problems:

1. I get "$.fn.slider namespace is already bound" warning even if I do NOT use .slider()
2. I cannot get the tooltip

[seiyria]

Provide an actual demo please.

[dejudicibus]

You can see that if you go to

https://genealogia.dejudicibus.it/?f=dejudicibus&b=ventimiglia&s=genealogie

and click on 1 below the red label "Lista". You will see a slider controlling the zooming factor of diagram. As you can see, no tooltip appear, and if you go to console, in inspect, you will see the message

bootstrap-slider.js:1866 bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead.

I tried to change

var slider = new Slider("#<?php echo $gprefix; ?>-slider", { id: "<?php echo $gprefix; ?>-data", min: 50, max: 150, step: 10, value: 100, tooltip: "always" });

to use bootstrapSlider() instead of slider() but the warning is still there. Furthermore it is not clear to me how to use bootstrapSlider using the JavaScript syntax "new Object."

[seiyria]

We use jsfiddle because it isolates problems to a minimal environment, and doubles as a test to see if your issue is something unique to your environment, or something we can help you with. Please make a jsfiddle.

[dejudicibus]

OK, but how can I use jsfiddle? It does not contain your js and css code!

[seiyria]

You'll have to add it.

On Thu, Oct 4, 2018, 11:24 dejudicibus notifications@github.com wrote:

OK, but how can I use jsfiddle? It does not contain your js and css code!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/862#issuecomment-427082683, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2Tm7G1UDS3Q_W6QOYxXveZoVIvqFks5uhjZVgaJpZM4XFh7c .

[dejudicibus]

Done. https://jsfiddle.net/4r21c7Lu/ No tooltip

[dejudicibus]

This is the last https://jsfiddle.net/4r21c7Lu/3 I can reproduce the problem with tooltips but not the one with $.fn.slider How do I know which js is already setting it?

[dejudicibus]

Great... with https://jsfiddle.net/4r21c7Lu/4/ I was able to reproduce the problem: the fault is of

https://code.jquery.com/ui/1.12.1/jquery-ui.min.js

That is the code creating the conflict

[dejudicibus]

By the way, since jQuery UI is quite common, why do you use Slider instead of BootstrapSlider class?

[seiyria]

Because this is a slider, and we're not bound by the existence of other sliders. Per the documentation, you can circumvent it: https://github.com/seiyria/bootstrap-slider#using-bootstrapslider-namespace

[dejudicibus]

OK, I did what is suggested in the documentation to circumvent the problem, but it does not work. See https://jsfiddle.net/4r21c7Lu/5/ If you run the fiddle you get the warning in the console log anyway.

[dejudicibus]

And in any case, why tooltip option does not work?

[seiyria]

regardless of what you do, I think that warning will always print to let you know to use bootstrapSlider instead of slider.

the tooltip is technically working, but you're using bootstrap 4 CSS, we technically only support 3. here are some workarounds: https://github.com/seiyria/bootstrap-slider/issues/689

working: https://jsfiddle.net/4r21c7Lu/6/

[dejudicibus]

OK, so I have not to worry about the warning. The tooltip now works. Thank you.