Slider showing up as text box

[cabeatty]

Just a forward: I have already tried implementing the solution outlined in Issue #582 and had no change.

So I am having the same problem as the above mentioned issue. For some reason my slider, code below, is showing up as a simple text box, and I can not seem to figure out exactly why. I am working with Django, if thats of any help.

Here is the code for the slider and its container

<div class="container">
      <div class="about-container">
          <input type="text" id="test-slider" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
      </div>
</div>

Here is the code for importing the JS and CSS dependencies

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>window.jQuery || document.write('<script src="{% static "/home/js/assets/js/vendor/jquery.min.js" %}"><\/script>')</script>

    <link href="{% static '/home/css/dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static '/home/css/dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static '/home/js/assets/js/ie-emulation-modes-warning.js' %}"></script>
    <script src="{% static '/home/js/assets/js/ie10-viewport-bug-workaround.js' %}"></script>

    <link href="{% static '/home/css/starter-template.css' %}" rel="stylesheet">

    <!-- BOOTSTRAP-SLIDER -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.min.css" rel="stylesheet">  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js" type="text/javascript"></script>

And finally, here is the JavaScript

$(document).ready(function()
{

  $("#test-slider").slider();

});

$('#test-slider').slider({
    formatter: function(value) 
    {
          return 'Max Difference: ' + value;
      }
  });

Also, in lieu of providing a codepen of jsfiddle, I have an example up and running on the live version of the site: here Its the big damn white bar in the middle of the page.

Please let me know if you can help me resolve this issue. Thanks!

[seiyria]

We ask for a jsfiddle so we can isolate if it's an environment issue. Any number of things can be a problem here, but I see you have jQuery ui included. That's probably your problem.

On Thu, Oct 26, 2017, 12:24 Colin Beatty notifications@github.com wrote:

Just a forward: I have already tried implementing the solution outlined in Issue

582 https://github.com/seiyria/bootstrap-slider/issues/582 and had no

change.

So I am having the same problem as the above mentioned issue. For some reason my slider, code below, is showing up as a simple text box, and I can not seem to figure out exactly why. I am working with Django, if thats of any help.

Here is the code for the slider and its container

Here is the code for importing the JS and CSS dependencies

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="{% static "/home/js/assets/js/vendor/jquery.min.js" %}"><\/script>')</script>

<link href="{% static '/home/css/dist/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static '/home/css/dist/js/bootstrap.min.js' %}"></script>
<script src="{% static '/home/js/assets/js/ie-emulation-modes-warning.js' %}"></script>
<script src="{% static '/home/js/assets/js/ie10-viewport-bug-workaround.js' %}"></script>

<link href="{% static '/home/css/starter-template.css' %}" rel="stylesheet">

<!-- BOOTSTRAP-SLIDER -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js" type="text/javascript"></script>

And finally, here is the JavaScript

$(document).ready(function() {

$("#test-slider").slider();

}); $('#test-slider').slider({ formatter: function(value) { return 'Max Difference: ' + value; } });

Also, in lieu of providing a codepen of jsfiddle, I have an example up and running on the live version of the site: here http://wordaffinity.fun/home/about/ Its the big damn white bar in the middle of the page.

Please let me know if you can help me resolve this issue. Thanks!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/791, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2d5dU4z2spfd7vhGq7S2fo_lL7Ljks5swMA5gaJpZM4QH7ev .

[cabeatty]

Thanks for the quick response! Here is the jsfiddle Still looks like a text box.

As for the jQuery ui; for some reason it wont even recognize .slider(); as a function without it. I had that issue before any of this, and resolved it by including jQuery ui. Or at least I thought I did.

[seiyria]

Try to call .bootstrapSlider or create the slider without jQuery.

On Thu, Oct 26, 2017, 12:35 Colin Beatty notifications@github.com wrote:

Thanks for the quick response! Here is the jsfiddle https://jsfiddle.net/cabeatty/gtvo68g9/ Still looks like a text box.

As for the jQuery ui; for some reason it wont even recognize .slider(); as a function without it. I had that issue before any of this, and resolved it by including jQuery ui. Or at least I thought I did.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/791#issuecomment-339741570, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2bstDdNA-ipt65uEVYiImMwa0y3Hks5swMLlgaJpZM4QH7ev .

[cabeatty]

First off, here is the issue that I am getting when I get rid of jQuery UI

Also when I switch from .slider to .bootstrapSlider, irrelevant of whether or not jQuery UI is included or not, I git this issue.

I've tried both before and keep hitting a wall. Im going to try to make it without jQuery, and see if that works.

[cabeatty]

Yeah, its not working without jQuery either.

[seiyria]

Then you're going to need to provide a mvce, probably a jsfiddle. Because if it's not working then something in your environment is likely messing it up.

On Thu, Oct 26, 2017, 12:50 Colin Beatty notifications@github.com wrote:

Yeah, its not working without jQuery either.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/791#issuecomment-339745903, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2d35DElKx04Xswo0zh_qdiTW2ijFks5swMZmgaJpZM4QH7ev .

[cabeatty]

I included the jsfiddle above. Here it is again:

https://jsfiddle.net/cabeatty/gtvo68g9/1/

It seems to work just fine in the jsfiddle. So it must be an environmental issue.

[seiyria]

In that case there's not a lot we can do. It sounds like it can't find the library if you can't init it in any way.

On Thu, Oct 26, 2017, 13:28 Colin Beatty notifications@github.com wrote:

I included the jsfiddle above. Here it is again:

https://jsfiddle.net/cabeatty/gtvo68g9/1/

It seems to work just fine in the jsfiddle. So it must be an environmental issue.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/791#issuecomment-339756883, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2fvPmHEqKY_v1cShaqBBEjrAqPmZks5swM9mgaJpZM4QH7ev .

[cabeatty]

Thats what it looks like.
Thanks for the help either way, I really appreciate it!

[BJKPriyanka]

i am also getting the same issue. Did you find any solution @cabeatty

[cabeatty]

Unfortunately not just yet, are you also working with Django?

[BJKPriyanka]

NO. I am working on ember.

[doncatnip]

I have the same issue. Turns out selectize.js https://selectize.github.io/selectize.js/ is what's destroying the sliders for me. I have yet to debug the exact cause.

Edit: A bit more digging revealed that the particular Selectize wrap (YII2) that I use pulls jQuery-ui in the wrong order - it would seem that it has to be loaded before jQuery which in turn needs to be there before bootstrap-slider. Maybe it helps someone. (this ordering issue with JS is quite tiresome at times, wish everyone would adopt AMD)