2

I have this code for one slider and the structure appears correctly but when i move the slide , don't show the value of the answer inside of the input box "amount", appears "undifined" and i don't know why because when you inspect you can see that the div slider have a value in the tag name . I tryed with the html tag "value" too and didn't works too. What can i do ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>  Questionnaire </title>
    <meta name="Description" content="Questionnaire on business model" />
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    
    <script src="jquery-ui-1.9.2.js"></script>
    <script src="factaris.js"></script> 
    <link rel="stylesheet" href="STYLE.css" type="text/css" media="screen" />
    <script>
    jQuery(document).ready(function(){

        ///SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!!

        $( "#slider" ).slider({ 
        slide: function( event, ui ) {
            //$( "#amount" ).val( "$" + ui.value );  // show range 0-100 without ini values !!!!!
            // $( "#amount" ).val( "$" + this.value  ); //show undefined
            //   $( "#amount" ).val( "$" + 8); // show 8 all time
            $( "#amount" ).val( "$" + ui.name );    
        }
        });     
    });
    </script>
</head>
<body>
<div id="sizer">
    <form id= "formID"  name="formID" class="formular"   method="post" action= "<?= $url = "QUESTIONAREFINISHING.php"; ?>" accept-charset="utf-8">
    <div id="questionare" >
    <!--SLIDER-->   

    <?php if($row_questionset['Constructor']=="Slider"){?>
    <div>
        <label class="desc" value= "<?php $row_questionset['QuestionIDFKPK'];?>">
        <?php echo $row_questionset['QuestionValue']; ?>
        </label>
    </div>                                                          
    <?php while ($row_Answer=mysql_fetch_array($AnswersValue)){ ?>  
    <p>
        <label for="amount"><?php echo $row_questionset['QuestionValue']; ?></label>
        <input type="text" id="amount" name="amount"  />
    </p>

    <div id="slider" name="<?php echo $row_Answer['AnswerValue']; ?>" ></div>

    <?php } // End while loop ?>
    <?php } //End slider row ?> 
    <!--/SLIDER-->  
    </div>   
</form>
</div>   
</body>    
</html>
1
  • Could you remove all the empty lines, please?
    – Kimi
    Dec 13, 2012 at 14:14

3 Answers 3

3

To read the value of a jQuery UI Slider, you need to call the slider method on the element in question with the 'value' as the parameter, like so:

$( "#slider" ).slider( "value" );
2
  • I tryed with that like slide: function( event, ui ) { $( "#slider" ).slider( "value" ); var valueslider= ui.value; $( "#amount" ).val( "$" + valueslider); } but don't works. am i using that wrong ? Dec 13, 2012 at 14:49
  • Yes you are using it wrong. $( "#slider" ).slider( "value" ); will return the value. So you should use it as follow var valueslider = $( "#slider" ).slider( "value" );
    – jValdron
    Dec 13, 2012 at 15:13
0

with the value slider argument, if you want read the value on change the slider or/and on slide use the event methods of the slider:

function outputValue(sliderDom) {
    alert($(sliderDom).slider('value'));
};

$( "#slider" ).slider({
    //... your init
    slide: function(){
        outputValue(this);
    },
    change: function(){
        outputValue(this);
    }
});

edit

to fix you value problem try this

$('#slider').slider({
    //..
    min: 0,
    max: 100000 //or more
});
3
  • The strange is that when i put that only show as value numbers between on a range 0-100 and shouldnt be that . It should show the values of my data base because i say that here <div id="slider" value="<?= $row_Answer['AnswerValue']; ?>" ></div> and that works with other structures (radiobuttons,checkboxes,textfields..) so the problem is with the slider. Dec 13, 2012 at 15:03
  • @user1901142 play with the min and max option
    – silly
    Dec 13, 2012 at 15:10
  • Thats only increment the range, i want that appears my table values on the input armount , no the numbers between that range. My problem is that. Dec 13, 2012 at 15:25
0

If you'd like mto set an initial value, you need to set it when you call the slider method (with JS - not HTML).

$("#slider).slider({
    max: slideMax,
    min: slideMin,
    value: slideInit,

// To set the value to the `#amount` element, use the following `slide` event
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );    
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.