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")]);
});
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 have the following slider
$( "#slider-min-bw" ).slider({
range: true,
min: $("#BwLowerHidden").val(),
max: $("#BwUpperHidden").val(),
values: [ $("#BwLowerHidden").val(), $("#BwUpperHidden").val() ],
slide: function( event, ui ) {
$( "#slider-min-bw-range" ).val(ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$( "#slider-min-bw-range" ).val( $( "#slider-min-bw" ).slider( "values", 0 ) + "-" + $( "#slider-min-bw" ).slider( "values", 1 ) );
When I alert like,
alert($("#BwLowerHidden").val());
alert($("#BwUpperHidden").val());
I get the values as 2 and 10000 . But on the UI, I only get one handler and range appears to be 2-2 instead of 2-10000.
But at the same time, another slider like below, works perfectly as intended.
$( "#slider-min-dist" ).slider({
range: true,
min: $("#DistLowerHidden").val(),
max: $("#DistUpperHidden").val(),
values: [ $("#DistLowerHidden").val(), $("#DistUpperHidden").val() ],
slide: function( event, ui ) {
$( "#slider-min-dist-range" ).val(ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$( "#slider-min-dist-range" ).val( $( "#slider-min-dist" ).slider( "values", 0 ) +"-" + $( "#slider-min-dist" ).slider( "values", 1 ) );
What could possibly be wrong in the first snippet?
As suggested in this post,
http://stackoverflow.com/questions/13213054/jquery-slider-ui-not-sliding
the value should be a number.
Using a parseInt() did the trick.
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'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.