Ionic - How to delay angular range slider update

Question

I use range slider in my app and it works fine, but the problem is the code sends lots of range slider values to the server.And it causes some lags.I want to design that so it can send the only last value when user removes his finger from scrollbar.Is it possible ? If so what should I change from my code ? Thank in advance.Here is my code: Html part

<div class="item range">              
               <i class="icon ion-ios7-sunny-outline"></i>
               <input type="range" name="volume" min="0" max="100" value="{{scrollvalue}}" ng-model="scrollvalue" ng-change="enter(scrollvalue,lighting.id)">
               <i class="icon ion-ios7-sunny"></i>

            </div>

And here is controller part:

$scope.scrollvalue=0;

  $scope.enter = function(scrollvalue,deviceId,id){


    var data2 = {
      credentials: $scope.credentials,
      scrollvalue:scrollvalue,
      deviceId:deviceId
    };
         //var ss = id;

             $scope.scrollvalue=scrollvalue;

    LightingClient.postLightings(serverUrl, data2, 10000)
      .success(function (response) {

Sarantis Tofas · Accepted Answer · 2016-07-29 23:35:01Z

1

What you are looking for is to update your model only when the range input has lost its focus. Blur does exactly this. Just add the blur option to your model:

ng-model-options="{ updateOn: 'blur' }"

 <input type="range" name="volume" min="0" max="100" value="{{scrollvalue}}" ng-model="scrollvalue" ng-model-options="{ updateOn: 'blur' }" ng-change="enter(scrollvalue,lighting.id)">

Another option would be to delay the model update. For example you can set your model to get updated every 1 sec like this:

ng-model-options="{ debounce: 1000 }"

You can read more on ngModelOptions here

edited Jul 29, 2016 at 23:35

answered Jul 29, 2016 at 22:12

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Goodrich Over a year ago

Fyi, if any future readers are trying to control the slider via another input linked to ng-model, you may find this question valuable stackoverflow.com/q/42605685/5797593. Good luck!

Oyeme · Accepted Answer · 2017-06-14 14:55:41Z

0

I changed ng-change to ng-mouseup and it has fixed the issue with a delay and multiple requests to a server as I have been using ajax.

 ng-mouseup="enter(scrollvalue,lighting.id)"

answered Jun 14, 2017 at 14:55

Oyeme

11.3k4 gold badges46 silver badges66 bronze badges

Collectives™ on Stack Overflow

Ionic - How to delay angular range slider update

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related