Develop Reference

HTML Form Slider Group

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
});
}
},
});
})

How to make this slider smoother?

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.

jQuery UI slider to show images on drag

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/

Popup with value of slider when it's changed

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/

jQuery slider with value on drag handle/slider

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.