Coordinating sliders

I have 2 sliders lined to 2 input fields on a form - width and height. I want to coordinate the 2 values to keep them in scale. So, just taking the height slider, I have attached an event handler to the onChange event as follows:

slider2.attachEvent(“onChange”, “changeHeight”);

Then my changeHeight function is:

function changeHeight() {
var w = document.forms[0].OrigWidth.value;
var h = document.forms[0].OrigHeight.value;
var r = w / h;
document.getElementById(“ImageWidth”).value = roundNumber(document.forms[0].ImageHeight.value * r, 0);

Everything works in that function except the last line - i.e. the width slider doesn’t get set, but the width input box is changed and the price is calculated correctly. Am I doing something wrong?


Could you provide the hole demo or direct link? … leted_demo

Thanks for your reply. Here is the demo.
Complete (80.9 KB)

Sorry, how to reproduce it?
Locally it seems like everything works fine.

Move the width slider. The width input box changes OK. The height input box changes OK. The price changes OK. However, the height slider does not change position. This is the same in Chrome and IE for me.

If you mean that the ‘height’ slider chariot isn’t move - we can’t reproduce the issue: locally it works fine in all browsers.
Or i’ve miss somethig?

No, that’s the issue - I don’t think you’ve missed anything. I have attached a screenshot of my demo. Notice that the height slider is way to the left. For a value of 99 it should be a lot further along. Does yours look the same in this instance?

I just noticed that my attachment wasn’t allowed. It was a Word document (.doc). Is there another way I can get a screenshot to you?

Any graphic format.

Here is a screenshot graphic.

Here is my result on YOUR demo:

What OS and browser version you have?

Was there a resolution to this? I am having a similar problem with two sliders as well. The input field of the second slider gets updated but the second slider doesn’t move.

Could you provide completed demo too? … leted_demo

In his demo i have right result - can’t reproduce the issue.

Ok, here you go. I was able to duplicate the issue with this demo structure. You will see 4 sliders on the form. The two on the left should be synchronized. The two on the right are not.

Thanks (70.7 KB)

Any update on this issue?

The problem does not relate slider at all. There are several js errors in your code. Please check browser console when you run the demo.

  1. Check cases of elements ids here:

document.getElementById(“Vox_Low_Threshold”).value = val;
document.getElementById(“Vox_High_Threshold”).value = val;

  1. sldVoxHigh and sldVoxLow are not public variables. Therefore, they are undefined in ChangeLowThreshold and ChangeHighThreshold functions.

That did it. I knew I was missing something obvious. Thanks