i've got a problem with updating slider value from code. i have tried
$('#slider').slider('value', newValue);
$('#slider').val(newValue).slider();
$('#slider').val(newValue).slider('refresh');
and no result
any other suggestions
here is a sample code
Determines the value of the slider, if
there's only one handle. If there is
more than one handle, determines the
value of the first handle.
Code examples
Initialize a slider with the value option specified.
$( ".selector" ).slider({ value: 37 });
Get or set the value option, after init.
//getter
var value = $( ".selector" ).slider( "option", "value" );
//setter
$( ".selector" ).slider( "option", "value", 37 );
<html>
<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>
</html>
_
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 217,
values: [ 0, 217 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] );
$( "#amount2" ).val( ui.values[ 1 ] );
}
});
$("#amount").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
$("#slider-range").slider('values',1,$(this).val());
});
});
</script>
https://jsfiddle.net/brhuman/uvx6pdc1/
Just call showSlider() which was in slider.js file wherever u want. It will automatically refresh.
Related
Can you please take a look at this jsfiddle and let me know how I can use the slider to get values from 0 to 1 like 0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1
Here is what I have
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 10,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
$( "#opacity" ).val( $( "#slider" ).slider( "value" ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<p>
<label for="amount">Opacity:</label>
<input type="text" id="opacity" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
Your step value is too high, try:
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 0.1,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
jsfiddle demo
New fiddle demo
I am playing around with the jQuery UI slider and found two examples that look very similar to me.
However, the first slider allows for a handle to be dragged to the other side other handle, whereas the in the second slider, the handles seem to be blocking each other (i.e. you cannot drag the left handle to the right side of the right handle and vice versa).
Can somebody explain to me, why this is happening ?
Here is the fiddle: http://jsfiddle.net/w4gy8p1v/1/
Code for slider:
$(document).ready(function() {
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
});
});
<form>
<div>
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
</div>
<br />
<div id="slider"></div>
</form>
Code for second slider:
$(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 ) );
});
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
The difference comes from the range option (range: true).
When the range option is true, the slider handles can't cross.
I have a ui slider element that I am using to let people rate a product, the purpose is to have this slider along with a button to insert the value into a MySQL table (sort of voting)
my slider looks like
$("#slider-range-max4").slider({
range: "max",
min: 1,
max: 10,
value: 0,
slide: function (event, ui) {
$("#slider-range-max-amount4").text(ui.value);
}
});
$("#slider-range-max-amount1").text($("#slider-range-max1").slider("value"));
How can I use a button to send the value selected by the user to mysql, do I have to embed the code into a form ?
Thanks
use ajax like bellow and send the value to php
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$.ajax({
type:"POST",
url:"your.php",
data:"vote="+$( "#slider-range-max" ).slider( "value" ),
success:function(response){
alert(voted);
}
})
});
In PHP
<?php
$vote="";
if(isset($_POST['vote'])){$vote=$_POST['vote']}
//now do your job with MySql here
?>
I have multiple sliders and it updates the total slider accordingly per each slider. When I go to slide another slider it subtracts it again from the original total value and not the updated value that was from subtracting the previous slider amount.
// Photographer Slider
$('#TablePhotographer').toggle(this.checked);
$(function() {
$( "#photo-range-min" ).slider({
range: "min",
value: photo,
min: 1,
max: photo,
slide: function( event, ui ) {
$( "#photo_amount" ).val( "$" + ui.value );
$( "#total_amount").val("$" + (Number(ui.value) + Number(CityValue - photo)));
}
});
$( "#photo_amount" ).val( "$" + $( "#photo-range-min" ).slider( "value" ).toFixed(2) );
});
// Ceremony Slider
$('#TableCeremony').toggle(this.checked);
$(function() {
$( "#ceremony-range-min" ).slider({
range: "min",
value: ceremony,
min: 1,
max: ceremony,
slide: function( event, ui ) {
$( "#ceremony_amount" ).val( "$" + ui.value );
$( "#total_amount").val("$" + (Number(ui.value) + Number(CityValue - ceremony)));
}
});
//total slider
$('.BudgetTable').fadeIn(500);
$( "#total-range-min" ).slider({
range: "min",
value: CityValue,
min: 1,
max: CityValue,
slide: function( event, ui ) {
$( "#total_amount" ).val( "$" + ui.value);
}
});
$('#state_cost').text("Based on your selecttion, the average wedding cost in this state is $" + CityValue);
$( "#total_amount" ).val( "$" + $( "#total-range-min" ).slider( "value" ) );
As you can see, 2 sliders subtract from the same value, but I need to store the changed value per slider and show them in the total slider. I want to be able to be able to update the value according to each slider.
I am working with jQuery UI slider.
Here is the code i am using:
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 5,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
There will be 5 steps and I'd like to show the strings in each step instead of the numbers:
1=very sad
2=sad
3=not so sad
4=happy
5=very happy
How can I do this ?
You can put your step labels in an array, then use the slider's value as an index into that array:
var steps = [
"very sad",
"sad",
"not so sad",
"happy",
"very happy"
];
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$("#amount").val(steps[ui.value]);
}
});
$("#amount").val(steps[$("#slider").slider("value")]);
});