具有来自数据库的动态值的滑块

时间:2012-12-12 12:46:31

标签: php jquery sql jquery-ui-slider

我有一个滑块的代码,但我需要滑块显示我在SQL表中的动态值(数字和字母数字)。出于这个原因,我无法在minmaxstep上添加此处的静态值。我该怎么做才能在那里展示我的桌子的价值?

<script>
    $("#slider").slider({
        value:100,
        //MIN ANSWER INPUT VALUE ??? AND WITH MAX THE SAME
        min: 0,
        max: 500,
        step: 50,
        slide: function(event, ui) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));
});
</script>

<p>
    <label for="amount"><?php echo $row_questionset['QuestionValue']; ?>< /label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider"></div>     

1 个答案:

答案 0 :(得分:0)

你可以这样做。

<?php 
//get the values from the database here and set them to variables.
$minValue = 1;
$maxValue = 4;
$stepValue = 2;
?>
<html>
<script>
var minValue = <?php echo $minValue; ?> ;
var maxValue = <?php echo $maxValue; ?>;
var stepValue = <?php echo $stepValue; ?>;//if a string value, put <?php echo $stepValue; ?> inside quotes.
$( "#slider" ).slider({
                    value:100,//MIN ANSWER INPUT VALUE ??? AND WITH MAX THE SAME
                    min: minValue,
                    max: maxValue,
                    step: stepValue,
                    slide: function( event, ui ) {
                        $( "#amount" ).val( "$" + ui.value );
                    }
                });
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
</script>

<p>
<label for="amount"><?php echo $row_questionset['QuestionValue']; ?></label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

<div id="slider">

</div>
</html>