Attempting to resolve a discrepancy between oldVal and newVal in a 'range slider' and 'number spinner input' that are both linked. Discovered a bug where the difference between oldVal and newVal is much larger than expected, considering the step is set to 5.
The bug becomes evident when binding the slider and spinner, but upon further investigation, the underlying issue with newVal and oldVal becoming apparent: the farther the slider is dragged to the right, the greater the difference.
Here is the approach used to bind the slider & spinner:
var spinnerVal = newVal;
var newCss = spinnerVal / 100 + "%";
document.querySelector('.range-quantity').style.width = newCss;
document.querySelector('.range-handle').style.left = newCss;
Slider & spinner bound successfully
http://jsfiddle.net/PaulOD/PpCC4/4/
Exploring if there is a more standard method to bind them.
Here is an alternative fiddle where the above code is omitted, resulting in them not being bound to each other. The slider movement is smoother, but the console still shows the discrepancy between oldVal and newVal.
http://jsfiddle.net/PaulOD/PpCC4/5/
Any advice would be greatly appreciated. Also seeking a way to target the slider's true value controls without simply altering the css. Previously used 'ui.value' in jQuery to address these issues effectively, but now attempting to do so without jQuery.
Currently utilizing the powerange slider. EDIT: Bug also replicated with the html range slider here: http://plnkr.co/edit/ke5n3x?p=preview
Thank you, Paul