Невозможно реализовать слайдер jquery на вкладке начальной загрузки

Question

Я очень новичок в JS, поэтому, пожалуйста, постарайтесь быть максимально сложным. Я реализую вкладки начальной загрузки в моей HTML-странице. Там у меня есть слайдер с использованием jquery UI. До реализации вкладок слайдер работал отлично. Но теперь слайдер невидим. Я могу переместить его, если я нажму в нужном месте. Теперь я вижу только значение слайдера, а не целое.

Попытка перезагрузить скрипт слайдера после нажатия на вкладку, но это не помогает. И еще одна странная вещь в том, что, когда я сейчас полностью удаляю вкладки и пытаюсь просто получить ползунок, результат остается тем же, т.е. Я вижу только значение слайдера и весь div невидим.

Пожалуйста, попросите дальнейших разъяснений, если это необходимо. Любая помощь будет оценена. Заранее спасибо.

ЯШ:

$(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>

Обновить:

Слайдер теперь работает отлично! Все, что я сделал, это загрузил эти файлы:

<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>

Ранее я загружал их с локального диска следующим образом:

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

Они имеют следующие версии:

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

Так какие-нибудь идеи относительно того, в чем была проблема? Это действительно сбивает с толку меня.

Answer 1

НТН

основной

продвинутый

<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/