Slider with dynamic values from a database

Question

I have this code for a slider and works, but I need that the slider shows dynamic values that I have in a SQL table (numeric and alphanumeric). For that reason I can't put static values like here on min,max and step. What can I do to show the values of my table there?

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

Please take care with the formatting of your question. The more time you take making it easier for people to read, the more likely they are to take time to help you. — Rory McCrossan, Dec 12 '12 at 12:50
I understand it, what I mean is the original formatting was erratic which made it harder to read. — Rory McCrossan, Dec 12 '12 at 12:57

score 0 · Answer 1 · answered Dec 12 '12 at 13:05

You can do something like this.

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

Slider with dynamic values from a database

1 Answers1