bug: range slider min/max with ng-model doesnt work

[amitksaini78]

Type: bug

Platform: all

Basically, take range input min, max and value with ng-model=user.value:
$scope.user= {
min:'0',
max:'20000',
value:'10000'
}

Steps to reproduce:

1. make a normal slider with hard coded min="0" and max="100" ng-model="user.value". it works :)
2. make a configurable slider with min="{{user.min}}" max="user.max" value= "{{user.value}}" ng-model="user.value"

Does not work :(
now remove the ng-model, it works :)

http://codepen.io/anon/pen/kqAlv

Not sure where to park this bug. Is it a ionic/angular issue?

But before you throw away this bug as not my problem consider this: Having configurable min and max with ng-model is a basic requirement of a slider!

The problem is described here in detail:
http://forum.ionicframework.com/t/how-to-make-ionic-range-slider-min-and-max-configurable-instead-of-hard-coded-0-and-100/7800

[mhartington]

@perrygovier, want to take a look at this? Here is an updated codepen with referencing the nightlies

http://codepen.io/mhartington/pen/mFtji

[kelle62819]

I have run into this same problem. In fact, it looks like when setting the max dynamically the initial position is set correctly if the initial value is 100 or less. But if it is over 100, then it is initially set to 100.

Example with max: 200 and value: 50 and no step setting (works correctly)
http://codepen.io/kelle62819/pen/Ltbxs

Example with max: 200 and value: 195 and no step setting (doesn't work correctly, initial slider position set to 100)
http://codepen.io/kelle62819/pen/xiJwj

[Ionitron]

Greetings!

Due to this issue's age and inactivity, it has been closed.

If you are still experiencing this issue, please feel free to reopen it so we may assist you.
If you wish to get help using the framework itself, the recommended place is the forum.

Thank you for allowing me to assist you.

[cmellinas]

This issue is still here.

When using a configurable max > 100, if max is a scope value, max will be set automatically to 100 when changing view and returning back to the range page.
Except if the new cache feature (available in the nightly) is activated.

But in some cases (a popover with a range inside for example), it will return to 100

I tried bind once (::) of angular 1.3 but doesn't seems to prevent that.

The only solution is to use another range directive?

Thanks,

[louisdmli]

Agree with mellinas. This issue is still here.

[kelle62819]

This appears to be an issue with angular not supporting input type="range". I tried a pure angular project without anything ionic and the issue is still there.

[jwgmeligmeyling]

Can confirm this issue

[jwgmeligmeyling]

I use these directives to resolve the issue:

.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();
        })
      }
    }
  }
})

[JavierAbrego]

@jwgmeligmeyling the directives that you proposed solved my problem, thanks!

[jwgmeligmeyling]

@JavierAbrego No problem 😊 Sad that this issue is still around. But I think this is more an Angular issue than an Ionic issue.

[francisrod01]

Thanks @jwgmeligmeyling , Help me also!!! 👍 👍 👍

[gregor-srdic]

Thank you, helped me as well!

[osvaldoconcepcion]

Thank you so much!!

[jwgmeligmeyling]

This issue should not have been closed by @Ionitron ....
@perrygovier would my solution above be accepted as PR?

[perrygovier]

I'll take another look

[perrygovier]

This appears to be fixed in current versions of Angular, no? Not seeing any issues in http://codepen.io/mhartington/pen/mFtji?editors=101

[jwgmeligmeyling]

Seems this is indeed fixes as of 1.3.0-rc.1 with angular/angular.js@7b273a2 (issue angular/angular.js#2404). Codepin was not updated yet.
This issue can now be closed 😄

Update: The codepin was indeed on angular v1.2.17

[Ionitron]

Greetings @amitksaini78!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

[seb-bizeul]

The issue is still there. I' m using Ionic cli 2.0.0-beta.12.

[Mimateam]

Yeap, we can also confirm issue is still here. Using Ionic 1.2.4 and Angular v1.4.3.

This code doesnt work:
<input type="range" name="data-freq" min="{{dataFreqMin}}" max="{{dataFreqMax}}" value="{{dataFreq}}" ng-model="dataFreq" ng-change="dragDataFreq(dataFreq)">

And this one does:
<input type="range" name="data-freq" min="{{dataFreqMin}}" max="1000" value="{{dataFreq}}" ng-model="dataFreq" ng-change="dragDataFreq(dataFreq)">

Exactly the same issue as http://codepen.io/mhartington/pen/mFtji

[DanielePalombo]

+1

[amoraes]

Struggling with the same issue here...
Ionic 1.2.4 and Angular v1.4.3 too.

[Shookette]

+1 same problem with Ionic 1.2.4 and 1.3

[vTrip]

+1
my issue is that the slider has the correct value but does not show the correct value on the slide as it always has an initial position of '0'

Using both value and ng-model

When removing ng-model, problem is solved however I do not get real time update of value when the user drags.

Ionic 1.3.1

[santekotturi]

+1

Still seeing this in angular 1.5.3 (ionic 1.3.1).

           <input type="range"
                   min="{{minPointsCorrection}}"
                   max="{{maxPointsCorrection}}"
                   value="{{estimatedPoints}}"
                   name="estimatedPointsCorrection"
                   ng-model="activity.estimatedPoints">

yields an initial position:

where the estimatedPoints is exactly in the middle of the min & max.
Removing ng-model doesn't fix it for me.

Seems related to: angular/angular.js#6726
which was just picked up by Martin on angular 1 core team 12 days ago.

EDIT: JWGmeligMeyling's directives worked for me.

[AnthStep]

worked for me

<input type="range" ng-model="val" id="input" min={{min}} step={{step}}>

in controller:
angular.element(document.querySelector("#input")).attr("max", $scope.max)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.