简体   繁体   中英

implementing price range slider & reading the min, max values in jQuery

  1. I can not take the min & max values when slider is sliding.
  2. How to get values for printing?
  3. Is there any syntax for getting min & max values?

I have the following code:

<link rel="stylesheet" href="<?=base_url()?>javascripts/slider/jquery.ui.all.css">
<script src="<?=base_url()?>javascripts/slider/jquery-1.7.1.js"></script>
<script src="<?=base_url()?>javascripts/slider/jquery.ui.widget.js"></script>
<script src="<?=base_url()?>javascripts/slider/jquery.ui.mouse.js"></script>
<script src="<?=base_url()?>javascripts/slider/jquery.ui.slider.js"></script>
<form name="formList" id="formList" method="POST" action="<?php echo site_url();?>/hotels/search" enctype="multipart/form-data">
<script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 1000,
            values: [ 100, 1000 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );

            /*$( "#minValue" ).val( ui.values[ 0 ] );
            $( "#maxValue" ).val( ui.values[ 1 ] );*/

     var minValue = 1000 * $("#slider-range").slider("values", 0);
     var maxValue = 1000 * $("#slider-range").slider("values", 1);

        <?php echo $minValue;?> 

    });
    </script>
    <div class="left" id="leftSlider">
        <label for="amount">Price range:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
        <!-- <div id="range">Price Range <span id="amount"></span></div>
        <div id="slider"></div>-->
        <div id="slider-range">
    </div>

you are creating your variable in javascript and call through php its not possible, you need to use

document.getElementById("myDiv").innertHTML = minValue+maxValue
<div id="leftSlider"></div> <!-- display result here -->

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM