从价格范围滑块jquery获取值

时间:2012-03-31 07:45:37

标签: php jquery

<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.slider.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        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 ] );
});
</script>

<div class="demo">
<p>
    <label for="amount">Price range:</label>
<input type="text" id="amount" name ="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>

<div id="slider-range"></div>

 <input type="hidden" id="minValue" name="minValue" value="<?php echo (isset($_POST['minValue'])) ? $_POST['minValue'] : '75'; ?>" />
<input type="hidden" id="maxValue" name="maxValue" value="<?php echo (isset($_POST['maxValue'])) ? $_POST['maxValue'] : '300'; ?>" />

</div><!-- End demo -->
  1. 我如何获得最低和最低最大值?
  2. 当滑块滑动时如何从此代码中读取该值?
  3. 阅读min&amp;是否需要任何功能最大值?

2 个答案:

答案 0 :(得分:0)

假设您已正确使用了所有内容,我正在回答您的问题。

1)我如何获得最低和最低最大值。

答案:要获得最小值和最大值,您可以使用在插件中声明为默认选项的values数组。 幻灯片功能中的ui.values[ 0 ]将为您提供最小值,ui.values[ 1 ]将为您提供最大值。

2)当滑块滑动我从这段代码中读取的值时;

答案:当滑块滑动时,执行滑动功能,因此滑动功能内的代码块将自动为您提供所需的结果。

3)是否需要任何功能来阅读min&amp;最大值

答案:没有读取最小值和最大值的功能,这可以在滑动功能中实现,值是调用滑块功能的参数。

答案 1 :(得分:-1)

alert($( "#slider-range" ).slider( "values", 0 )) // minimum value

alert($( "#slider-range" ).slider( "values", 1 )) // max value