How to make Ionic range slider min and max configurable (instead of hard coded 0 and 100)?

1

Hi,
I would like to have the range min and max configurable. Hence instead of hardcoded min and max (usually set as 0 and 100 in your examples) I am trying to load them up like this:

<div class="range range-assertive" >
                        <i class="icon ion-ios7-sunny-outline"></i>
                        <input type="range" min="{{user.min}}" max="{{user.max}}" value="{{user.value}}" step="1000" ng-model="user.value">
                        {{user.value}}
                        /{{user.max}}
                        <i class="icon ion-ios7-sunny"></i>
</div>

But its not working.

Notice that if I change the above min and max to hard coded min=0 and max=“200000” it works!

I’ve a codepen showing this problem: http://codepen.io/anon/pen/kqAlv

Is there someone who has encountered this?

1 Like
2

Please note that I am on the latest version of ionic.
ionic -v
v1.1.8

ionic lib -v
Local Ionic version: 1.0.0-beta.11
Latest Ionic version: 1.0.0-beta.11 (released 2014-08-06)

  • Local version up to date
3

It seems to be a normal usecase for people to load min and max in a range slider. So I must be missing something.

Any ideas anyone?

4

Is that what you are talking about?

Edit: Not sure what your problem is. I looked at the codepen and the max on both of them is 20,000.

5

Soo a few things.

A rang input can only take strings, not numbers. Also adding ng-model to it seem to throw it off somehow.

6

Aha, range input (min and max) has to be strings, and not numbers. Thanks!

That works:

   $scope.user= {
    min:'0',
    max:'20000',
    value:'10000'
}

But we still have one problem. ng-model=“user.value” does not work. This seem to be a bug.

7

Hmm I think this is because angular it self doesn’t support ng-model on sliders.

Well anyway, there are a ton a range-slider directives out there that you could use instead. Ours is just a styled html element.

8

Interestingly, normal use case with hard-coded min and max works with ng-model!

<div class="range range-assertive" >
                        <i class="icon ion-ios7-sunny-outline"></i>
                        <input type="range" min="0" max="20000" value="user.value" step="1000" ng-model="user.value">
                        {{user.value}}
                        /{{user.max}}
                        <i class="icon ion-ios7-sunny"></i>
                    </div>

So, angular does allow ng-model on sliders. Not sure where to park this bug though.

(You can see the 2nd slider in this code pen: http://codepen.io/anon/pen/kqAlv)

9

Hmm, very strange… want to open an issue for this? Could be a good time to make a range slider directive for ionic

10

Here you go: https://github.com/driftyco/ionic/issues/1948

12

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