Slider not working using Jquery ui

Question

i am trying to implement slider functionality using jquery. Slider is visible and upon scrolling it's taking in the values but not displayed on the screen.I used console.log on ui.value , and i also want the values from 94 to 110 only.

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

need help.

Answer 1

Set the content of div like this

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

and provide a minimum value in the option

$(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 is here http://jsfiddle.net/76mxLjad/1/

Answer 2

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