Range Slider doesn't work inside modal view #121

jgw96 · 2017-01-13T22:44:34Z

From @ninoguba on June 13, 2016 17:33

Short description of the problem:

Range Slider is not draggable when inside a modal view running on the phone.

What behavior are you expecting?

Range Slider should be draggable to select desired value.

Steps to reproduce:

Add a range slider component inside a modal view
Launch modal view in your controller

<ion-modal-view>
    <div class="item range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="volume">
        <i class="icon ion-volume-high"></i>
    </div>
</ion-modal-view>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

When ran on Chrome browser, the range slider is at least tappable allowing to change the value but dragging the slider is still not working. The following message is appearing in my console the moment I tap or try to drag the slider:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

Which Ionic Version? 1.2.x up to 1.3.x

Copied from original issue: ionic-team/ionic-framework#6885

The text was updated successfully, but these errors were encountered:

jgw96 · 2017-01-13T22:44:34Z

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

jgw96 · 2017-01-13T22:44:35Z

From @ninoguba on June 14, 2016 1:49

I don't have a plunker but you can view this with Ionic View using this ID: fcf03f24

All I did here was just start with the blank starter project and modified the following files:

index.html (replace body with this)

<body ng-app="starter" ng-controller="RangeCtrl">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>

        <div class="item item-text-wrap">
          <p>This range slider works as expected.</p>

          <div class="range">
            <i class="icon ion-volume-low"></i>
            <input type="range" name="volume">
            <i class="icon ion-volume-high"></i>
          </div>
        </div>

        <div class="item item-text-wrap">
          <p>Launch a modal with the same range slider.</p>

          <button class="button button-block button-outline button-positive" ng-click="openModal()">
            Open Modal View
          </button>
        </div>

      </ion-content>
    </ion-pane>
  </body>

app.js (add this code)

.controller('RangeCtrl', function($scope, $ionicModal) {
  $scope.data = {};

  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('modal-range.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();
    });
  };

  $scope.closeModal = function() {
    $scope.modal.remove();
  };

  // Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });

  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });

  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
})

modal-range.html (create this file)

<ion-modal-view>

    <div class="item item-text-wrap" style="height:100%">
        <p>This range slider doesnt work as expected.</p>

        <div class="range">
            <i class="icon ion-volume-low"></i>
            <input type="range" name="volume">
            <i class="icon ion-volume-high"></i>
        </div>

        <button class="button button-block button-outline button-positive" ng-click="closeModal()">
            Close Modal View
        </button>
    </div>

</ion-modal-view>

jgw96 · 2017-01-13T22:44:35Z

From @basdp on June 29, 2016 14:20

This is the malefactor:
https://github.com/driftyco/ionic/blob/1.x/js/angular/service/modal.js#L194

I fixed it temporarily by changing the code to:

var isInScroll = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'scroll');
if (isInScroll !== null && !isInScroll) {
    e.preventDefault();
}

jgw96 · 2017-01-13T22:44:35Z

From @ninoguba on June 29, 2016 16:13

Thanks @basdp I'll give this a try.

jgw96 · 2017-01-13T22:44:36Z

From @danmatthews on September 23, 2016 14:25

+1 for this - the only way to get it working for me seems to be to downgrade to 1.2.0 😢

jgw96 · 2017-01-13T22:44:36Z

From @ninoguba on September 23, 2016 15:16

As a workaround you can use @basdp's code above. I verified it resolves the issue with sliders on modals.

shanesmith · 2017-03-02T05:45:59Z

Another fix that doesn't involve changing Ionic's code is to simply add the scroll class to the range... no adverse effects so far.

<div class="range">
  <input type="range" class="scroll" />
</div>

RWOverdijk · 2017-03-23T15:43:58Z

This issue made me get coffee twice more often than I usually do. Why does class="scroll" work?

shanesmith · 2017-03-24T02:18:23Z

Hehe, I suppose I should have included some explanation.

The offending code can be found here: https://github.com/driftyco/ionic-v1/blob/master/js/angular/service/modal.js#L190

As you can see, touchmove events inside modals are cancelled unless the target or a parent element has the class scroll... so I just manually added the class to trick it. =)

Like I alluded to, I won't pretend to understand all the possible side effects this might have... but so far it's been fine for my use!

RWOverdijk · 2017-03-24T08:25:36Z

@shanesmith I agree. This works for me!

roysaad · 2017-06-05T12:23:41Z

Wasted a few hours trying to find a solution for this. Thanks @shanesmith for the quick fix.

jgw96 added modals range v1 labels Jan 13, 2017

jgw96 mentioned this issue Jan 13, 2017

Range Slider doesn't work inside modal view ionic-team/ionic-framework#6885

Closed

shanesmith mentioned this issue Mar 2, 2017

HTML5 range input inside a modal does not slide/click/change value on iOS ionic-team/ionic-framework#5802

Closed

amritsubedi mentioned this issue Jan 31, 2019

_From @basdp on June 29, 2016 14:20_ #396

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Range Slider doesn't work inside modal view #121

Range Slider doesn't work inside modal view #121

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

shanesmith commented Mar 2, 2017

RWOverdijk commented Mar 23, 2017

shanesmith commented Mar 24, 2017

RWOverdijk commented Mar 24, 2017

roysaad commented Jun 5, 2017 •

edited

Loading

Range Slider doesn't work inside modal view #121

Range Slider doesn't work inside modal view #121

Comments

jgw96 commented Jan 13, 2017

Short description of the problem:

What behavior are you expecting?

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

jgw96 commented Jan 13, 2017

shanesmith commented Mar 2, 2017

RWOverdijk commented Mar 23, 2017

shanesmith commented Mar 24, 2017

RWOverdijk commented Mar 24, 2017

roysaad commented Jun 5, 2017 • edited Loading

roysaad commented Jun 5, 2017 •

edited

Loading