Unable to implement jquery slider in bootstrap tab

Question

I am very new to JS so please try to be as elaborate as possible. I am implementing bootstrap tabs in my html page. There I have a slider using the jquery ui. Before implementing the tabs the slider was working perfectly. But now the slider is invisible. I can move it if I click at the right place. All I can see now is the value of the slider instead of the whole thing.

Tried to reload the slider script after the tab is clicked but it doesn't help. And another weird thing is that, when I remove the tabs altogether now and try to just have the slider, the result is still the same ie. I see only the slider value and the entire div is invisible.

Please ask for any further clarification if needed. Any help would be appreciated. Thanks in advance.

js:

$(document).ready(function(){

              alert("Inside slider");
              $( "#slider" ).slider({
                  value:<%-tasks["priority"]%>, 
                  min: 0,
                  max: 10,
                  step: 1,
                  slide: function( event, ui ) {
                    // alert(ui.value);
                              $( "#priority" ).val( ui.value ); 
                  },
                  start: function( event, ui ) {alert("started")}
              });
              $( "#priority" ).val( $( "#slider" ).slider( "value" ) );
               $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                alert("here")
  $( "#slider" ).slider();
  });
          $('#tab_control a[href="#basic"]').tab('show');
     })

html:

<ul class="nav nav-tabs" role="tablist" id="tab_control">
            <li class="active"><a href="#basic" id="basic_tab" data-target=".basic-tab" role="tab" data-toggle="tab">Basic</a></li>
            <li><a href="#basic" data-target="#basic, #advanced" role="tab" data-toggle="tab">Advanced</a></li>
          </ul>

          <div class="tab-pane active basic-tab" id="basic">
        <label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
        <div class="col-sm-10">
            <div id="slider" ></div>
            <p><input type="text"  id="priority" name="priority" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
        </div>
        </div>

         <div class="tab-pane advanced-tab" id="advanced">
          </div>

update:

The slider is now working perfectly! All I did was load these files:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Previously I was loading them from my local disk like this :

<link href="/css/jquery-ui.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.min.js"></script>

They are of these versions:

jquery-ui.min.css : jQuery UI - v1.11.2
jquery.js : jQuery v1.11.1
jquery-ui.min.js : jQuery UI - v1.11.2

So any ideas as to what was the problem?? Its really baffling me.

Answer 1

HTH

Basic

Advanced

<div class="tab-pane active fade in basic-tab" id="basic">
    <label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
    <div class="col-sm-10">
        <div id="slider" ></div>
        <p><input type="text"  id="priority" name="priority" readonly =""/> </p>
    </div>
</div>
<div class="tab-pane fade advanced-tab" id="advanced">
testing
      </div>


$( "#slider" ).slider({
              value:"", 
              min: 0,
              max: 10,
              step: 1,
              slide: function( event, ui ) {
                $( "#priority" ).val( ui.value ); 
              },
              start: function( event, ui ) {alert("started")}
          });
        $( "#priority" ).val( $( "#slider" ).slider( "value" ) );

http://jsfiddle.net/jz5r5dsw/1/