2

So I have an input[type=range] where the min and max attributes change based on an $http call.

  <input type="range" name="bidSlider" id="bidSlider" min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">

bid.max = 1.5 * bid.value;
bid.min = .5 * bid.value;

bid.value is undefined until an $http call comes back. I could initialize bid.min & bid.max to be some default value, however it would be a very bad experience because there's no way for me to really guess what bid.min and bid.max will be (they are based on bid.value), since bid.value can be as low as 50, and can also be upwards in the thousands.

If I don't initialize default values for bid.min or bid.max, the min/max of the range defaults to 0-100 and usually the slider is position all the way to the right or left.

What's the best way to handle this scenario?

See Plunker Example

EDIT:
This is not so much of an issue of the slider jumping around because it happens pretty quickly... it's that the slider doesn't reposition itself relative to the new range once the bid.value, bid.min && bid.max becomes set rather, the slider (bid.value) repositions itself relative to the default range, 0-100 so it appears to be at the minimum range or the maximum range when in fact the value falls in the middle of the range.

Improve this question

2 Answers 2

Reset to default
0

You could also hide element until ajax gets loaded & till then you can show some loading image, which would tell user that UI controller is loading

<input ng-if="bid.min && bid.min" type="range" name="bidSlider" id="bidSlider" 
min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">
<img ng-if="!bid.min || !bid.max" ng-src="loadingImg.jpg" width="50" height="50">
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Hi! thanks for your response, I should have clarified... it's not so much of an issue of the jumping around because it happens pretty quickly... it's that the slider doesn't reposition relative to the new range once the bid.min && bid.max becomes set, rather it positions itself relative to the default range of 0 - 100 so it appears to be at the minimum or the maximum when in fact the value falls in the middle of the range.
you mean to say min & max are not updating of slider
Nope, because while the slider remains all the way to the left, if you inspect the element min & max are populated. I believe it has to do with bid.value being an ngModel instead of Value. It works fine if I change the ngModel to value, however I need to keep this as an ngModel because another input[number] relies on it.
0

So I fixed this issue by appending the input when the ajax call came back. So the plunker above was a very simplified version. In my real life code, I am doing this in an angular directive which is why it is wrapped into a link function. The BiddingValue:Finish event is broadcasted when the ajax call with bid.value comes back, with the bid object (which has the calculated min and max) as params.

link: function (scope, elem) {
    scope.$on('BiddingValue:Finish', function (evt, params) {
          var input = ' <input type="range" name="bidSlider" id="bidSlider" min="'+{{bid.min}}+'" max="'+{{bid.max}}+'" ng-model="bid.value" step="1">';
          elem.append(input);
          $compile(elem)(scope);
        });
    }
Improve this answer

4 Comments

why to create own directive..as angular ng-if provides same thing..I explained in my answer
because my application is a very large application and i want to reuse this component.
creating unnecessary thing while you have a directive like ng-if thats not good..
do upvote if my answer,,does any sort of help to you..Thanks :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.