Develop Reference

Working with a set of range sliders. Fix my jsfiddle?

I need my three range sliders to share from a common "value pool." So if the max is 100, and slider-1 is set to 51. you should expect slider-2 and 3 to take from a shared pool of 49. The way I have it now, if you change slider 1, slider 2 and 3 are equal. This is not ideal!
How would you go about making it so I could set slider-1 to a value of "51" for example,
and then set slider-2 to a value of "30" making slider-3 automatically "19".
And then from there, if I bump slider 3 with a value of "19" up to "20" for example, slider-2 changes to "29.5" and slider-1 changes to "50.5"
Here is a jsfiddle, hope my question makes sense:
https://jsfiddle.net/7ho3zfve/

There are a few things to note: first, you are really using redundant code. If you decide later to add more inputs, you're doing the same thing multiple times. Instead, use classes. You can have a single function or collection of functions that work on all inputs, as the behavior is going to be the same across them all.
Now, if I understand you correctly, you want a set max value to be respected, and any elements that have NOT yet been manually moved, to have their values set to an equal portion of the remaining max value? The code below will do that. It includes a draggable detector (basically, the sliders have a mousedown event that sets the isDragging, and the mousemove event checks that it is, in fact, dragging), which is when the remainder of the maxVal is split. The code is pretty heavily commented, it should get you most of the way to what you're looking for.
The one thing I haven't really worked on yet, and potentially a big pitfall, is that, when two of the three sliders have been manually set, you can still move the THIRD slider to the right. I'm guessing you'd want to catch that, but I haven't worked out that logic yet.
var maxVal = 1000,
isDragging = false,
fixedEls, flexEls;
/***
* Tracking the dragging -- on mousedown, I set the isDragging
* to true, then I check that for the mousemove on this element.
* On mouseup, I reset the isDragging to false, thus ending the
* simulated drag event.
***/
$(".slide-control").on("mousemove", function() {
if (isDragging) {
// I want to keep two collections of sibling elements:
// those that have NOT been moved, and those that HAVE.
// I simply add the .slider-fixed to those that have,
// which are elements I don't want to be moveable later.
fixedEls = $(this).siblings("input.slider-fixed");
flexEls = $(this).siblings("input").not(".slider-fixed");
// The subtotal I will be using is simply the current
// slider element plus any elements that have already had
// their .slider-fixed class set. The resulting value,
// subtracted from the above maxVal, will be the pool of
// values for any non-fixed sliders.
var subtotal = parseInt($(this).val());
fixedEls.each(function() {
subtotal += parseInt($(this).val());
});
// The sharedVals is the remaining value, evenly split
// between all moveable elements.
var sharedVals = (maxVal - subtotal) / flexEls.length;
// Set the element's val to that sharedVal.
flexEls.each(function() {
$(this).val(sharedVals)
})
/***
* The following lines simply output the values of each slider
* to the results pane. Not a necessity, more a debug thing.
***/
$(".results").empty();
$(this).parent().children("input").each(function() {
var myHtml = "<p>Slider " + $(this).prop("id") + ": " + $(this).val() + "</p>"
$(".results").append(myHtml);
})
}
}).on("mouseup", function() {
// When the drag event has ended, set the toggle off.
isDragging = false;
// I don't want this particular slider affected by any other
// movements.
$(this).addClass("slider-fixed");
}).on("mousedown", function() {
isDragging = true;
});
.slide-control {
display: block;
margin-left: 20px;
}
.slider-fixed::before {
margin-left: -20px;
content: ">>";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<h3>A slider control</h3>
<h4>Note: >> beside a slider indicates that it won't be affected by any further movement of other sliders.</h4>
</div>
<input type="range" id="myRange" value="0" min="0" max="1000" class="slide-control">
<input type="range" id="myRange2" value="0" min="0" max="1000" class="slide-control">
<input type="range" id="myRange3" value="0" min="0" max="1000" class="slide-control">
<div class="results">
</div>

Went with CumminUp07's library suggestion here:keith-wood.name/linkedsliders.html to accomplish this.
Thanks everyone for putting together some useful information and code on this thread.

Change variable value on scroll - jQuery

I have this variable: coords.zoom. I'm using the value of coords.zoom to set the width and height of a zoomed image, thus giving me a magnification effect. And it works great!
My only problem is that I don't know how to increment (or decrement) the value of this variable, when the user scrolls over my image. I need to create some function that will change the value of this variable on user scroll, but actually nothing is scrolling up or down. I would also like this variable to always be between 1 and 3.
Any ideas?

I've found a nice light solution to this problem. For anyone who needs this kind of mechanism, you've come to the right place.
Let's say you have a div with the ID of zoom. To increment (or decrement) the value of my coords.zoom variable paste this code between your body tags:
<script>
coords.zoom = 1.5 // set a start value to coords.zoom
$('.image').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0){
coords.zoom = coords.zoom + 0.1;
if (coords.zoom>3){coords.zoom = 3} // 3 is the max value of coords.zoom
$("#zoom").text(coords.zoom);
} else {
coords.zoom = coords.zoom - 0.1;
if (coords.zoom<1.2){coords.zoom = 1.2} // 1.2 is the min value of coords.zoom
$("#zoom").text(coords.zoom);
}
});
</script>
There we go! Nice and efficient. Obviously, I've chose to increment the value by 0.1, but you can set it to any value in any range... Have a good day!

It this code will execute when the document will be scrolled. And the code will execute in a proper manner with setTimeout.
var scrltimeout = null;
jQuery(document)
.scroll(function(){
clearTimeout(scrltimeout);
scrltimeout = setTimeout(
function(){
alert('document scrolled');
}, 300)
});

jQuery Mobile slider snap?

I've spent the better past of 2 hours trying out random code from different sources that claim they've managed to snap the slider to particular points. I'm not sure if this is feasible with the jQuery Mobile library, since the jQuery UI version does support it, but i'm really needing to figure something out for a current project.
Essentially I have a timeline with different dates. They're not in "steps", like 10's or 20's, they're different numbers. Something like 1, 3, 10, 12, 32. I need the slider to snap at those points.
Currently, I have something that's testing the step attr only.
$('#slider-1').live( "change", function(e) {
var step = $(this).attr('step'),
val = $(this).val();
if(step % val == step || val == step){
console.log(val)
}
});
The issue i'm having with the slider, not only the snapping, is when i slide anywhere near 20 or 40 or 60 etc, i'm getting console logs. It's not logging ON 20 etc.

Figured it out after many iterations of code and reading the documentation for specific events I can bind.
So essentially I had a timeline of numbers in my array that looks something like:
-0--10--20-----70--100---150---200---250---300---350---400-----500----------------1000
I needed to snap to the nearest number depending on the position of the slider-handle. I did this by testing the current value when the slider was being moved against the closest number in the array. I would then dynamically change the sliders value and would then have to do a force refresh of the slider to see the change.
$(function() {
/*
Array of values between 0 - 1000 (can be any set of numbers you want to snap to,
but you must make sure the 'max' attribute on the input element is <= the last
value in the array)
*/
var values = [0, 10, 20, 70, 100, 150, 200, 250, 300, 350, 400, 500, 1000],
/*
A way for us to check the current and previous values of the slider so we only
call doSomething() if these are different. This way the function isn't called twice. These should NOT have the same values on init.
*/
currentVal = 0,
prevVal = null,
// Assign our slider to a variable so we're not hitting the dom repeatedly.
$slider = $("#slider-1");
/*
After each change of our input value, we assign the slider value to the nearest number
in our array for our "snap" effect
*/
$($slider).bind("change", function(){
$($slider).val(findNearest($($slider).val()))
});
/*
We must capture click events on the slider itself if the user doesn't drag the handle.
*/
$(".ui-slider[role=application]").bind("vclick",function(){
$($slider).slider('refresh');
})
/*
jQuery creates new dom elements for us, which in the case of the handle, is an anchor element.
Use mouseup method to test on the computer, otherwise touchend method for mobile devices.
*/
$("a.ui-slider-handle").touchend(function(){
// If our currentVal hasn't changed after a snap action, do nothing, otherwise call doSomething()
if(currentVal != prevVal) {
prevVal = currentVal;
doSomething();
}
// Force slider refresh for visible snap effect
$($slider).slider('refresh');
})
// Used to iterate over our array and check for nearest value to what is passed in
function findNearest(goal) {
var closest = null;
$.each(values, function(){
if (closest == null || Math.abs(this - goal) < Math.abs(closest - goal)) {
closest = this;
}
});
return currentVal = Number(closest);
}
function doSomething(){
...
}
});
And my HTML:
<label for="slider-1" id="slider_label_1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="0" min="0" max="1000" step="10" />

How can I set the duration of this jQuery animation proportionally?

I've created a quick test to show what I'm trying to do:
http://jsfiddle.net/zY3HH/
If you click the "Toggle Width" button once, a square will take one second to grow to full width. Click it again, and it will take one second to shrink down to zero width.
However, click the "Toggle Width" button twice in rapid succession - the second time when the square has grown to only a small fraction of its total width (like 10%) - you'll notice that the animation still takes a full second to return the square to zero width, which looks awkward, IMO.
While that behavior is expected, I'd like the latter animation to happen in an amount of time that's proportional to the width that it's covering. In other words, if you click "Toggle Width" a second time when the square is at 10% of its total width, I'd like it to take about 1/10th of a second to shrink back to zero width.
It should be relatively easy (I think) to make the value of the duration property dynamic, calculated when the jQuery click handler is run, to measure the current width of the square and determine the duration accordingly.
However, am I missing a better way to do this? Does jQuery provide an easy way, or expose some sort of method or property to make this easier?

I don't think jQuery has any built-in utility for doing this. The math required to do what you want is fairly straightforward, however, so I'd suggest just going that route. Something like:
var expanded = false;
$('input').click(function() {
$('div').stop();
var duration;
if (expanded) {
duration = ($('div').width() / 100) * 1000;
$('div').animate({ width: '0' }, { queue: false, duration: duration });
expanded = false;
} else {
duration = ((100 - $('div').width()) / 100) * 1000;
$('div').animate({ width: '100px' }, { queue: false, duration: duration });
expanded = true;
}
});
Here's a working example: http://jsfiddle.net/zY3HH/2/
If you've got some free time on your hands, maybe you could make the duration interpolation logic a bit more generic and package it up as a jQuery extension/plugin.

This is what you want - http://jsfiddle.net/FloydPink/qe3Yz/
var expanded = false;
$('input').click(function() {
var width = $('div').width(); //gives the current width of the div as a number (without 'px' etc.)
if (expanded) {
$('div').animate({
width: '0'
}, {
queue: false,
duration: (width/100 * 1000)// (current width/total width * 1 sec in ms) });
expanded = false;
} else {
$('div').animate({
width: '100px'
}, {
queue: false,
duration: 1000
});
expanded = true;
}
});

jQuery UI: smooth slider with one snap (to default value)?

I'd like to make a slider that snaps to the center while retaining smooth action elsewhere. Something like a jQuery version of a real-life speaker balance slider. Is it possible?
Or should I just create my own slider with a draggable object, constricted to one axis with containing it frame, snapping to another object (or grid) positioned in the center of the frame?
Edit: I simply need a slider that allows values e.g. from -10 to -1, 0, and 1 to 10 (between -1 and 1 snap to 0) with step: 0.1

You should be able to use the jQuery slider, but restrict its motion with the slide event:
jSlider.slider({
// other options...
slide: function (event, ui) {
if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
// force it to 0 between -1 and 1.
jSlider.slider('value', 0);
return false;
}
return true;
}
});

Hmmm...so this is what I'm envisioning in my head...A background that slides on a timer like a carousel (maybe these are big images), with a row of thumbnails on top that slides smooth. That what you want to build?
EDIT: Here's what you need to do:
I rarely find the need to use jQuery plugins. Here is what you need:
Mousedown (on the slider). api.jquery.com/mousedown/. There is a callback on mouse down an on release.
Track mouse position inside the slider container while you're dragging the slider docs.jquery.com/Tutorials:Mouse_Position
Use the animate function to move the slider while your mouse still hasn't been released api.jquery.com/animate/ Stop animate on release.
When your slider gets to a certain x position in it's container, force the "smooth" function - ie a different animate function.

Use the following so that your jquery slider automatically snaps to the nearest in the step. The trick is to implement your own step-interval-slider. The problem is, if your max and min are separated by a small distance (for e.g. 5-10) your slide will behave in steps because the default step=1, so you need to compute your step based on that. If your max-min values are separated by a huge distance (e.g. 1-1000 or more) you can leave the computed_step calculation and initialize it to 1.
max_limit = 30;
min_limit = 5;
stick_to_steps_of = 5;
var computed_step = max_term/100; //you can vary the denominator to make it smoother
$("#my_slider" ).slider({
animate : true,
value: max_limit,
min: min_limit,
max: max_limit,
step: computed_step,
stop: function( event, ui ) {
d = parseInt(parseInt(ui.value)/stick_to_steps_of);
rem = parseInt(ui.value)%stick_to_steps_of;
var fval = 0;
if (rem <= parseInt(stick_to_steps_of/2)) {
fval = d*stick_to_steps_of;
}else{
fval = (d+1)*stick_to_steps_of;
}
$("#my_slider").slider('option', 'value', fval);
$('#myslider_current_value').html(fval); //some placeholder to show the current value
}
});