Evaluate attribute value as number and not string within directive

Question

I am pretty new to AngularJS and I am not sure this can be really accomplished. I'm using this angular directive within a custom directive template and I want to set some of its attributes from isolated scope properties. The thing is that it seems some of them only accept numeric values and Angular evaluates them as string.

For instance, this works as expected:

<div slider ng-model="myModel" start=0 end=10 step=1></div>

I want to be able to set start/end/step attributes from an isolated scope property like follows:

<div slider ng-model="myModel" start={{attributes.range[0]}} end={{attributes.range[1]}} step={{attributes.step}}></div>

This is interpreted as follows:

<div ng-model="myModel" start="0" end="10" step="1" class="ng-isolate-scope ng-pristine ng-valid"></div>

And I get the following exception:

RangeError: noUiSlider: 'range' value isn't numeric.

Is there out a way to evaluate directive attributes to number instead of string?

Answer 1

In the current version of angular nouislider (v 0.3.1) you can fix this by using more parseFloats in the source code. It was listed as an issue by another user for a different problem. Here's the link but in case the link dies, I've put the code below.

slider.noUiSlider({
          start: [
            scope.ngFrom || scope.start,
            scope.ngTo || scope.end

should be

slider.noUiSlider({
          start: [
            parseFloat(scope.ngFrom) || parseFloat(scope.start),
            parseFloat(scope.ngTo) || parseFloat(scope.end)