Need help on how to use this script to show images instead of values. I need 5 images to be shown when user drag handle. Like slideshow. Here is the slider code
http://jqueryui.com/slider/#steps
Also need to make fade effect on image swap.
This is what i got so far:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
if (ui.value == 100) {
$('#green').hide();
};
if (ui.value == 200) {
$('#green').hide();
$('#red').show();
};
if (ui.value == 400) {
$('#red').hide();
$('#blue').show();
};
$("#hour").text(ui.value);
} });
http://jsfiddle.net/LGMHP/182/
Help would be greatly appreciates.
Jquery offers a fadein fadeout that could easily let you do what you need. It's the equivalent of show and hide, but with a fade. http://api.jquery.com/fadein/
You can set animation duration and add a function on complete. So instead of the show and hide you have, you can do something like:
$('#green').hide('fast', function(){$('#red').show('slow');});
That said, you'll have a problem handling sliding from right to left. To handle all cases, maybe you should use classes. And to push a bit further and simplify, you could work with attributes. Like this:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
$('.showing').fadeOut(function(){$('[data-value='+ui.value+']').fadeIn().addClass('showing');}).removeClass('showing');
$("#hour").text(ui.value);
}
});
see jsfiddle: http://jsfiddle.net/m67Lz3u7/
Related
I'm in need of a Slider Group, or something equivalent (I'm unsure of an official name).
Essentially, there's multiple sliders, and they all add up to 100%. By increasing one, you decrease the others.
I know that this problem has been solved already, as I've seen it used over at Humble Bundle, where you select where your donations go. Is there a library out there that does this?
If not, I'm fine with building something using jQuery-UI, or some other UI framework.
You can use jQuery UI sliders to do this pretty easily. Below is some pseudo code of the javascript you'll want to look into. The documentation does a pretty good job of covering how the events work:
API Documentation: http://api.jqueryui.com/slider/
JSFiddle: https://jsfiddle.net/b54dntrz/
HTML:
<div id="slider1"></div>
<br/>
<div id="slider2"></div>
JavaScript:
$(document).ready(function () {
$('#slider1').slider({
max: 100,
slide: function (event, ui) {
var slider2val = $('#slider2').slider('value');
if (ui.value + slider2val > 100) {
$('#slider2').slider({
value: slider2val - 1
});
}
}
});
$('#slider2').slider({
max: 100,
slide: function (event, ui) {
var slider1val = $('#slider1').slider('value');
if (ui.value + slider1val > 100) {
$('#slider1').slider({
value: slider1val - 1
});
}
},
});
})
Below is my slider code :
$("#slider").slider({
value: 100,
min: 0,
max: 500,
step: 50,
slide: function (event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#slider').slider('value'));
Is there any way to make the same slider smoother without any other tools using ?
Fiddle Link
See the step property, you can decrease it based on your needs to make it smoother.
I have the next jsfiddle:
https://jsfiddle.net/alonshmiel/vxz7fnvk/1/
There is a slider with an ellipse that contains arrows.
I want to write a function that shows a popup with the value of the ellipse when the user changes the value.
BUT: There are two options to scroll it:
1) When you click on a certain value, a popup with the value will be shown on the screen.
2) When you click on the ellipse and move it to the left or right, and then stop clicking on the ellipse (in other words, stop scrolling it), a popup with the value will be shown on the screen with the value.
$("#slider").slider({
value:30,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#slider a" ).html("<span class='Triangles'>◀▶</span>");
$( "#slider-value" ).html(ui.value);
}
});
Any help appreciated!
You want to bind to the stop event. It will fire when the user stops dragging or when the click at a different point on the slider.
This is your updated code:
$("#slider").slider({
value: 30,
min: 0,
max: 100,
step: 10,
slide: function (event, ui) {
$("#slider a").html("<span class='Triangles'>◀▶</span>");
$("#slider-value").html(ui.value);
},
stop: function (event, ui) {
alert(ui.value);
}
});
Working Fiddle: https://jsfiddle.net/vxz7fnvk/3/
I'm new to jquery and javascript, but I am looking to do what I think should be a relatively simple task. I want to use the UI Slider widget to control certain actions. Get to value 100, show an image. Get to value 200, destroy the previous image, play a new animation (or show an image). This is what I have written so far: http://jsfiddle.net/LGMHP/14/
Am I going about this completely the wrong way?
Looks like you were missing some dollar signs in front of your jQuery variables. Try:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
if (ui.value == 100) {
$('#green').hide();
};
if (ui.value == 200) {
$('#green').hide();
$('#red').show();
};
$("#hour").text(ui.value);
}
});
jsFiddle example.
I am trying to display the value of the slider inside the drag handle (slider). Any resouce provided is much appreciated. I am using jQuery 1.5.1
Thanks
Are you using jQuery UI Slider ?
If so, this is a solution :
$("#slider").slider({
change: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
},
slide: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
}
});
jsFiddle example here
Just wanted to add a little to the answer.
If you are setting an initial value, or you would like the text to appear on the handle before the slide method is called you will need to add the document ready bit at the bottom, but i have also condensed the code a little
// take value from event, ui.value
$("#slider1").slider({
slide: function (event, ui) {
$("#slider").find(".ui-slider-handle").text(ui.value);
}
});
// sets text initially to value of slider, even if a default value is set
$(document).ready(function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
});
Thx all, I have solution for jQuery ui slider with value on drag different handles.
Example for 2 handles:
$("#wt-altitude-range").slider({
range: true,
min: 0,
max: 3000,
values: [ 100, 2500 ],
slide: function(event, ui) {
$(ui.handle).text(ui.value);
}
});
Work for slide event.
ui.handle - current handle, ui.value - current value.