javascript - slider position for a dynamic input[range] with changing min/max values in Angular? -


so have input[type=range] min , max attributes change based on $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 undefined until $http call comes back. initialize bid.min & bid.max default value, bad experience because there's no way me guess bid.min , bid.max (they based on bid.value), since bid.value can low 50, , can upwards in thousands.

if don't initialize default values bid.min or bid.max, min/max of range defaults 0-100 , slider position way right or left.

what's best way handle scenario?

see plunker example

edit:
not of issue of slider jumping around because happens pretty quickly... it's slider doesn't reposition relative new range once bid.value, bid.min && bid.max becomes set rather, slider (bid.value) repositions relative default range, 0-100 appears @ minimum range or maximum range when in fact value falls in middle of range.

you hide element until ajax gets loaded & till can show loading image, tell user ui controller 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"> 

Comments

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -