AngularJS notation in input type range min attribute

Question

I would expect the following expression to have the same outcome:

Case 1:

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min="-55" max="55">

Case 2 (difference to case 1 is that I replaced 55 with AngularJS scope variables):

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min="{{value.rangeInputMin}}" max="{{value.rangeInputMax}}">

with value.rangeInputMax equals 55 and value.rangeInputMin equals -55.

But they do not have the same output. For example let's says value.rangeInput is in both cases -10. Then in the 1st example the dot in the range slider is set at -10. But in the 2nd example the dot is set to 0. I tried to convert value.rangeInputMin and value.rangeInputMax into numbers and change the statement (without double quotes) to this:

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min={{value.rangeInputMin}} max={{value.rangeInputMax}}>

I also tried with different notations, e.g. value.rangeInputMin, "value.rangeInputMin", tried to set it with ng-init, create another scope variable and assign the value in this one, etc.

But it is still showing a different behaviour than in the 1st case.

ran into the same issue trying to help solve this. Codepen - codepen.io/jusopi/pen/NxErbb — jusopi
– jusopi, Commented Feb 8, 2016 at 16:42

jusopi · Accepted Answer · 2016-02-08 17:22:11Z

Per my comments above, I think you've found a bug as I'd expect to be able to declaratively set this value in your template alongside your min and max values. This simply isn't the case. A typical workaround for this is to set the model value after you've set your min and max values using $timeout. It's not ideal but it works.

controller function

function($timeout) {
    var vc = this

    // vc.rangeInput = -10;
    vc.rangeInputMin = -55;
    vc.rangeInputMax = 55;

    $timeout(function(){
        vc.rangeInput = -10;
    })
}

You can see it working here - http://codepen.io/jusopi/pen/vLQKJY?editors=1010

If you need to, you can write a simple directive to basically trigger ng-init-like functionality on the next $digest cycle. This might be a better solution if you run into this issue more than once of twice in your design.

callLater directive

.directive('callLater', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            scope: {
                callLater: '&'
            },
            link: function($scope, elem, attr) {
                $timeout(function(){
                    $scope.callLater()
                })
            }
        }
    }
])

directive in template

<input type="range" name="myRangeInput" ng-model="vc.delayedInput"  
    min="{{vc.rangeInputMin || -55}}" max="{{vc.rangeInputMax || 55}}" 
    call-later="vc.delayedInput = -10;">

example - http://codepen.io/jusopi/pen/JGeKOz?editors=1010

Javier Conde · Accepted Answer · 2016-02-08 17:08:23Z

2

The problem is commented here: https://github.com/driftyco/ionic/issues/1948

JWGmeligMeyling created the ngMax and ngMin directives and they seem to work pretty well:

.directive('ngMin', function() {
  return {
    restrict : 'A',
    require : ['ngModel'],
    compile: function($element, $attr) {
      return function linkDateTimeSelect(scope, element, attrs, controllers) {
        var ngModelController = controllers[0];
        scope.$watch($attr.ngMin, function watchNgMin(value) {
          element.attr('min', value);
          ngModelController.$render();
        })
      }
    }
  }
})
.directive('ngMax', function() {
  return {
    restrict : 'A',
    require : ['ngModel'],
    compile: function($element, $attr) {
      return function linkDateTimeSelect(scope, element, attrs, controllers) {
        var ngModelController = controllers[0];
        scope.$watch($attr.ngMax, function watchNgMax(value) {
          element.attr('max', value);
          ngModelController.$render();
        })
      }
    }
  }
})

Here's the codepen: http://codepen.io/anon/pen/MKzezB

edited Feb 8, 2016 at 17:08

answered Feb 8, 2016 at 16:28

Javier Conde

2,58322 silver badges27 bronze badges

1 Comment

jusopi Over a year ago

I actually like this solution better than what I proposed. Somewhere in that issue thread, someone said it was fixed in Angular, however I forked my codepen and used angular 1.5.0-rc.2 and it was still an issue.

Amit Dhaka · Accepted Answer · 2016-02-08 16:31:32Z

2

Try removing value="value.rangeInput" from the markup.

answered Feb 8, 2016 at 16:31

Amit Dhaka

1764 bronze badges

2 Comments

thadeuszlay Over a year ago

No, I need the value-attribute. It sets the value (=the position of the dot) of that range-input type.

jusopi Over a year ago

@AmitDhaka even removing the value attribute, the issue manifests. codepen.io/jusopi/pen/NxErbb

Collectives™ on Stack Overflow

AngularJS notation in input type range min attribute

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related