0

I'm trying to fix a discrepancy between oldVal and newVal in a 'range slider' and 'number spinner input' both binded to each other. I noticed a bug where the oldVal and newVal had a large discrepancy. I would expect a difference of 1 or maybe 5 as the step is set to 5.

This bug becomes noticable when I bind the slider and spinner, but looking at the console, really binding them just makes the underlying problem with newVal and oldVal visible: the further we drag the slider to the right, the greater the discrepancy.

Here is what I tried 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

http://jsfiddle.net/PaulOD/PpCC4/4/

I'm not sure if this is the best way to bind them, is there a more standard way?

Here is a fiddle where I omit the above code, but they are now not binded to eachother. We can see that the slider moves much more naturally, however the console reports the same discrepancy between oldVal and newVal.

http://jsfiddle.net/PaulOD/PpCC4/5/

Any help most appreciated. It would also be great if I could find a way to target the slider's true value controls, it feels a bit hacky to just change the css. In jQuery I used to target 'ui.value' and that sorted these issues out great, but I'm trying to do this without jQuery this time.

I'm using the powerange slider. http://abpetkov.github.io/powerange/ EDIT: but I think the choice of slider is not significant as I've reproduced the bug with the html range slider here: http://plnkr.co/edit/ke5n3x?p=preview

Thanks, Paul

Paul
  • 75
  • 9

1 Answers1

1

it may look like the difference increases but it actually just depends on how fast you "slide". I logged newVal - oldVal and depending on how fast I move the slider the bigger the numbers get. But there are the same on the whole scale. Most of the time I got 21 and 64.

Maybe it seems to you like this because the value is updated multiple times when you slider for a "longer" time (meaning more than a view ms).

Another think on how you made the directives:

Instead of using the parent scope's value preview.donation you should use two-way bindings. Here is an article explaining it: http://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

Cheers

Sebastian Sebald
  • 16,130
  • 5
  • 62
  • 66
  • Good article, I learnt that the "=" prefix is for two-way binding, "&" is for one-way and "@" is for text. Also, this answer has some more examples of two-way binding: http://stackoverflow.com/a/14116498/1175238 and has a plunker http://plnkr.co/edit/A29hl6?p=preview which I modified for a slider and spinner here http://plnkr.co/edit/ke5n3x?p=preview But I think I am overlooking a way to bind them so I don't need to set the value manually in the $watch with `document.getElementById('num').value = $scope.amount;` Perhaps this is why I am still seeing the discrepancy? Cheers! – Paul Apr 17 '14 at 21:53