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);
calcPrice();
slider1.setValue(document.getElementById(“ImageWidth”).value);
}
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?
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.
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?
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.
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.