Range slider performance

ionic-v1
1

I have a view with a simple range slider that performs very slowly on an Android device.

<ion-view title="Weekly Budget">

  <h2>{{user.budget | currency}}</h2>

  <form name="form" ng-submit="submit(form)">

      <div class="range">
          <i class="icon ion-ios7-cart"></i>
          <input type="range" name="budget" ng-model="user.budget" min="10" max="500" >
          <i class="icon ion-ios7-cart"></i>
      </div>

      <button type="submit" class="button"
              >Done
      </button>

  </form>
2

What version of android were you testing on? The range slider is just a default html slider with some css, so it could be some performance issue on the platform. I know the range slider is long overdue for a rework and to make a directive out of it.

3

I have the same problem. 3 slider elements with 4 items in each.

Takes about 3-4 seconds till rendering.

Tested on:

  • Nexus 4, Nexus 5 (ver 4.4.2)
  • Samsung galaxy s2 4.1.2
  • Samsung galaxy s3 version 4.1.2
  • Samsung galaxy s4 version 4.4.2

All of them have the same behaviour.

4

Tested on Android 4.04 and 4.4.3. All perform very slowly. Its so slow that the drag updates are once a second !

5

Alright, I’ll take this post and report the issues to the dev. Hopefully we can get something together and make an optimized directive.

You always roll your own slider directive, like this simple one here.

Or use a third party one, like this

http://prajwalkman.github.io/angular-slider/

1 Like
6

Any progress on fixing the performance of the built-in slider ?

7

Nothing yet, we have some bigger issue to take care of first.
The built is slider is just a standard html slider, so you can always put together a directive and submit a pull request if you want.

8

Hi mhartington,

Any progress on fixing the performance of the built-in slider ?

when I use sidemenu and range silder, They are Influence each other

9

Hi @mhartington and everyone,

I’m troubleshooting the range input’s performance on iOS 8.4.1 (iPhone 6) and wondered if there are any updates or suggestions of third party sliders. The user experience is great on ionic serve but the range isn’t actually sliding on iOS 8 (running on actual iPhone through xcode).

Here are a few details:

$scope.filter.amount is set to 5 when the controller loads. This view has tabs and a side menu, so drag-content is marked false with ‘’. I tried it with and without with content dragging disabled, but no effect. I changed the range to just 5 units (1 to 5) because the slider seems to move a single notch when the user hits it, and a few seconds later it’s possible to move it one more notch. The slider is within a parent div that has an ng-show attribute, but there’s no special gesture handling.

I’ve also tried https://libraries.io/bower/tenzen-ionic-rangeslider and https://github.com/rzajac/angularjs-slider but neither is working. It seems like drag events are being blocked at another level or something.

Any suggestions or preferred 3rd party libraries? Appreciate any help. Thanks

10

In case anyone else runs into this issue of the Range slider not working with side menu, the fix was covered in an existing issue as described at https://github.com/driftyco/ionic/issues/318. The cause was the sidemenu’s event handling interfering with the slider.

It sounds like the fix will be pulled into a future Ionic release and in the meantime there are two different fixes at https://github.com/driftyco/ionic/issues/318. I found the directive workaround by ArTiSTiX worked well - it’s described at http://play.ionic.io/app/f44b3d0adee8).