I have a slider (input type="range") with its minimum = 0, maximum = 1 and step = 0.001, defined in an angular controller. The default "step" attribute on a range input is 1, so if the model I bind to it using ng-model=... has a starting value of 0.5, it will display the slider at 1 (or at 0 if the start value is < 0.5) because it's step is too big.
Here is a JS fiddle demonstrating the issue: http://jsfiddle.net/1qhhr85x/
Does anyone have an easy solution to this problem?
The problem is related to how browsers deal with the new input[range] types and the time when Angular does it template binding.
In this case, the template binding happens after being appended to the dom (which causes the browser render engine to kick in).
When the render engine kicks in it tries to adheres to the HTML spec which determines how to calculate the step's, min & max and displays the slider accordingly. (have a look, there's something funny about the min having to be float for the step to be a calculated float)
The problem being that the DOM contains "step='{{step}}'" at this point of time (Angular didn't kick in yet, next cycle it will) and I assume the render engine calculates using default values.
The solution
Make sure the step value is set before the the template is added to the DOM. You can achieve this by setting the value of the "step" value upon controller construction. (We aren't suppose to touch the element inside a controller, but i couldn't think of another way to set the step before it's added to the DOM)
myApp.controller('CalcCtrl', function ($scope, $element) {
$scope.val1 = 0.4;
$scope.val2 = 0.74;
var rEl = $("input[type='range']", $element);
rEl.each(function (idx, el) {
$(el).attr("step", 0.001);
});
});
Here's a working fiddle: http://jsfiddle.net/dLaLgfp8/1/
