angular-rangeslider
angular-rangeslider copied to clipboard
Step attribute not working as expected
I've been using the range slider for a while, but I just found out that the step attribute is not working as expected.
I'm using the following HTML:
<div
range-slider
min="0"
max="10"
step="0.01"
orientation="horizontal"
decimal-steps="2"
model-min="data.constructies.perimeter.min"
model-max="data.constructies.perimeter.max"
>
</div>
<div class="row">
<div class="col-md-5">
<input type="number" ng-model="data.constructies.perimeter.min" class="form-control" step="0.01">
</div>
<div class="col-md-2 text-center">
-
</div>
<div class="col-md-5">
<input type="number" ng-model="data.constructies.perimeter.max" class="form-control" step="0.01">
</div>
</div>
As you can see, the model is being used in the slider as well as in an number input. Both the slider and the input have the step attribute set to 0.01, but when using the slider, the steps are always 1, eventhough it's being set to 0.01. The step size of 0.01 does work in the number input, so the problem is not being cause by the input doing some wierd stuff with the data.
How can it be that this doesn't work?
@JerVoo: can you solve this issue ? i have same issue it's working with decimal number like 1,2,5,10, but not working with fractional value like 0.1, .1, 0.02 etc.
It's been a while since I looked at this but I think the problem is the rounding here:
proposal = Math.round(proposal / per) * per;
https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js#L579
Basically step
must be an integer otherwise this calculation doesn't work.
You could try scaling up your model values, so instead of 0-10
with a step of 0.01
you could use 0-1000
with a step of 1
and then scale them back down again in the UI / when you need to use them elsewhere.
Or perhaps someone could submit a PR with an improvement to the calculation?
@danielcrisp : thank you for your response.