滑塊無法使用jQuery UI

Question

我正在嘗試使用jquery實現滑塊功能。 滑塊是可見的，滾動時它會接受值，但不顯示在屏幕上。我在ui.value上使用console.log，我也只希望值從94到110。

          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-heading">
                <div class="panel-btns">

                </div><!-- panel-btns -->                 
                 </div><!-- panel-heading -->

              <div class="panel-body">
               <label for="temp">Temparature:  </label>
                <div id="temp"></div>
                <div id="slider-min"></div>
              </div><!-- panel-body -->
            </div><!-- panel -->
          </div><!-- col-md-6 -->
        </div><!-- row -->


<script>

    $(document).ready(function(){

       $('#slider-min').slider({
          range: 'min',
          max: 110,
          value: 92,
          slide: function(event,ui){
               console.log(ui.value);
               $( "#temp" ).val( "$" + ui.value );
          }
       });
         $("#temp").val($("#slider-min").slider("value"));
     });


  </script>

需要幫忙。

Answer 1

像這樣設置div的內容

$( "#temp" ).html( "$" + ui.value );

並在選項中提供最小值

$(document).ready(function(){

   $('#slider-min').slider({
      range: 'min',
      max: 110,
      min: 94,
      value: 94,
      slide: function(event,ui){
           console.log(ui.value);
           $( "#temp" ).html( "$" + ui.value );
      }
   });
     $("#temp").val($("#slider-min").slider("value"));
 });

小提琴在這里http://jsfiddle.net/76mxLjad/1/

Answer 2

如果您要在input打印值，在這種情況下，您需要使用val（），因此，您要在div中打印值，因此更好地使用text或html $( "#temp" ).text( "$" + ui.value ); text $( "#temp" ).text( "$" + ui.value );