<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 -->
How I can get the min & max values?
When slider sliding how do I read that values from this code?
Is there any function is needed for reading the min & max values?
Assuming you have used every thing correctly i am answering your questions.
1)How I can get the min & max values.
Answer: to get min and max values you can use the values array which is declared as a default option in the plugin.
ui.values[ 0 ] in slide function will give you min values and ui.values[ 1 ] will give you max value.
2)when slider sliding how I read that values from this code;
Answer: when slider is sliding the slide function is executed so the code block which is inside the slide function will automatically give you the desired result.
3)Is there any function is needed for reading the min & max values
Answer: No there is no function for reading min and max values, this can be achieved in slide function and values is the parameter for calling the slider function.
alert($( "#slider-range" ).slider( "values", 0 )) // minimum value
alert($( "#slider-range" ).slider( "values", 1 )) // max value
Related
I want to add jQuery price range but when I add it, it is always blank. I made sure to include all classes, I tried tutorials and still did not show up.
Here is one of the tutorials that I tried link
It looks like this when I out the codes into my page
img
Here are my classes:
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Slider code
<div class="form-price-range-filter">
<form method="post" action="">
<div>
<input type="" id="min" name="min_price"
value="<?php echo $min; ?>">
<div id="slider-range"></div>
<input type="" id="max" name="max_price"
value="<?php echo $max; ?>">
</div>
<div>
<input type="submit" name="submit_range"
value="Filter Product" class="btn-submit">
</div>
</form>
</div>
jQuery code
<script type="text/javascript">
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 1000,
values: [ <?php echo $min; ?>, <?php echo $max; ?> ],
slide: function( event, ui ) {
$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$( "#min" ).val(ui.values[ 0 ]);
$( "#max" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
Can anyone tell me what is wrong? I tried at least 10 tutorials before posting here - all have the same result with me
I have this jquery script (slider):
<script>
$( function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 25,
value: 1,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$( "#amount" ).val( $("#slider-range-max").slider("value") );
});
</script>
This is my html outout:
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max"></div>
I want the value of my slider stored as a php variable.
To call upon a php code that might have some logic in it, you need to have your html and javascript in a file, then your php code in a different file, like so :
html_file.php (contains only html template and javascript).
html part:
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max"></div>
Javascript part:
<script>
$( function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 25,
value: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
},
change: function(event, ui) {
$.post('php_file.php', {slider_val: ui.value}).done(
function(result) {
//your php code sends result back here.
//do something with result.
console.log(result);
}
);
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>
php_file.php (contains the php code and logic).
you then retrieve the value in your php code like so:
<?php
//$slider_val contains the value of your slider
$slider_val = $_POST['slider_val'];
//you can output the value back to your javascript like so
echo $slider_val;
You can send the input value to php like this
HTML
<input type="text" placeholder="Amount" onkeyup="send(this.value)">
SCRIPT
<script>
function send(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("value").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "send.php?value=" + str, true);
xmlhttp.send();
}
</script>
PHP
$value = $_REQUEST["value"];
echo $value;
Try this. Hope it helps to solve your problem.
i'm trying to use jquery autocomplete with dynamic textfield generated, autocomplete works but the main problem is i cant populate textfield with name 'alamat' properly. How to set current textfield 'alamat' value properly in autocomplete ?
HTML
<form id="myForm" name="myForm" method="post">
<table id="myTable" border="1" cellpadding="1" cellspacing="1">
<thead>
<th>No</th><th>Nama</th><th>Alamat</th>
</thead>
<tbody></tbody>
</table>
<input id="addButton" name="addButton" type="button" value="Add an input" />
<input id="removeButton" name="removeButton" type="button" value="Remove an input" />
</form>
JS
<script type="text/javascript">
var counter = 1;
$(function() {
var options = {
source: 'autocomplete.php',
minLength: 2,
focus: function( event, ui ) {
$( '#nama_' + counter ).val( ui.item.value );
$( '#alamat_' + counter ).val( ui.item.alamat );
console.log(ui.item.alamat);
},
select: function( event, ui ) {
$( '#nama_' + counter ).val( ui.item.value );
$( '#alamat_' + counter ).val( ui.item.alamat );
console.log(ui.item.alamat);
}
};
$('input.searchNama').live("keydown.autocomplete", function() {
$(this).autocomplete(options);
});
var addInput = function() {
if (counter > 1){
$('input#removeButton').removeAttr('disabled');
}
var inputHTML = ' <tr><td><div id="' + counter + '">'+ counter +'</div></td><td><input type="text" id="nama_' +counter + '" class="searchNama" name="nama_' + counter +' " value="" /></td><td><input type="text" id="alamat_' + counter + '" class="searchAlamat" name="alamat_' + counter + '" value="" /></td></tr>';
$(inputHTML).appendTo("table#myTable tbody");
$("input.searchNama:last").focus();
counter++;
};
var removeInput = function() {
counter--;
if(counter == 1){
$('input#removeButton').attr('disabled','disabled');
counter++;
console.log('Jika Counter == 1 :' + counter);
} else {
$("table#myTable tbody tr:last").remove();
console.log('Jika Counter != 1 :' + counter);
}
};
if (!$("table#myTable tbody").find("input.searchNama").length) {
addInput();
}
$("input#addButton").click(addInput);
$("input#removeButton").click(removeInput);
});
</script>
my autocomplete.php generate JSON result
[{
"label": "Aditya Nursyahbani - Jl. Bratasena IX Blok U6 No. 7",
"value": "Aditya Nursyahbani",
"alamat": "Jl. Bratasena IX Blok U6 No. 7"
},
{
"label": "Slamet Aji Pamungkas - Jl. Melati 2 No. 3",
"value": "Slamet Aji Pamungkas",
"alamat": "Jl. Melati 2 No. 3"
}]
I upload my script on fiddle in this link!
thanks in advanced.
$('input.searchAlamat').val(ui.item.alamat);
Your selector will populate all inputs with class='searchAlamat' that are contained in the page.
WIthin the select callback, this will be the current input instance that autocomplete is bound to so you can traverse within the row it is in:
$(this).closest('tr').find('input.searchAlamat').val(ui.item.alamat);
DEMO
Note that I removed focus functionality
I have difficulty using the jQuery slider range in a form. To test I use a simple form and processors (originally from here):
form.php
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.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 ) );
});
</script>
</head>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<label for="amount">Age range:</label>
<input type="text" id="amount" name="agerange" style="border: 0; color: #f6931f; font-weight: bold; " />
</p>
<div id="slider-range""></div>
<input type="submit">
</form>
</body>
</html>
welcome.php
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Your age range is: <?php echo $_POST["agerange"]; ?>
</body>
</html>
The slider shows up properly however the form returns no value for age range.
Not sure what value(s) this form return so that I can use that in a form processing script. Appreciate your hints
Since you're working with the age you have to remove the dollar sign from the range value.
replace this line :
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
with this:
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
and this two lines:
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
with this two:
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
Now you have this string in the $_POST["agerange"] (let's say) : "35+-+75"
(the "+" is the replacement for the space used by php when post is sent)
so you can use the explode() function and obtain an array of two values.. like this:
<?php
$range = explode(' - ', $_POST['agerange']);
?>
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Minimum age in your range is: <?php echo $range[0]; ?><br />
....and maximum is: <?php echo $range[1]; ?><br />
</body>
</html>
Not sure if this still applies, but I easily implemented a slider inside of a form. Here is the simplified code that I used:
»» Note that the numericToGrade() function is just something I used to convert a numerical value (0-4 in this case) to a letter grade (F,D-A). It does not affect how the script works. ««
<html>
<head>
<link href="../css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
// OPTIONAL: If there are other versions of jQuery running on the site,
// this will ensure proper script operation. 'NC()' replaces '$()'.
var NC = jQuery.noConflict();
NC(function() {
NC("#slider").slider({
value:3, max: 4,
slide: function( event, ui ) {
NC("#grade").val(numericToGrade(ui.value));
NC("#gradedisp").html(numericToGrade(ui.value));
}});
var val = NC("#slider").slider("value");
NC("#grade").val(numericToGrade(val));
NC("#gradedisp").html(numericToGrade(val));
});
function numericToGrade(num) {
switch (num) {
case 0: return "F"; break;
case 1: return "D"; break;
case 2: return "C"; break;
case 3: return "B"; break;
case 4: return "A"; break;
default: return "err";
}
}
</script>
</head>
<body>
<form action="submit.php" method="POST">
<label for="slider">Grade Us:</label>
<span id="gradedisp"></span>
<span id="slider"></span>
<input type="hidden" id="grade" name="rating" />
</form>
</body>
</html>
Here are a couple screenshots: First of the page, and second the inspected (generated) code through Google Chrome:
When the slider 'slides', this is what happens: both the display element (<span id="gradedisp">) and the hidden input element (<input type="hidden" id="grade" name="rating">) get updated simultaneously. This is useful for initial debugging/final output to your users.
Note that the <span> tag requires you to use .html instead of .val like the <input> tag utilizes.
Finally, when the form is submitted, you can grab the slider's value with PHP simply using this code:
$rating = $_POST['rating'];
Hope this helps!
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>
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" );
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
});
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 );
}
});