使用Jquery ui时滑块无法工作

Slider not working using Jquery ui

本文关键字：工作 Jquery ui 使用      更新时间：2023-09-26

我正在尝试使用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>

需要帮助。

像这样设置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"));
 });

Fiddle来了http://jsfiddle.net/76mxLjad/1/

如果您使用打印input中的值，在这种情况下，您需要使用val（）。因此，您在div中打印值，因此最好使用文本或html $( "#temp" ).text( "$" + ui.value );

相关文章：