Side menu and range - range not working

ionic-v1
1

Hello,

at first I want to say that this framework is great - that is what I was looking for. Tahn You guys.
I think there is bug with range input with side menu.
I can’t control it:/ My code in short…

    <ion-side-menus>
  <!-- Center content -->
  <ion-pane ion-side-menu-content>
	<ion-nav-bar animation="nav-title-slide-ios7"
				 type="bar-stable"
				 back-button-type="button-icon"
				 back-button-icon="ion-arrow-left-c"></ion-nav-bar>
	<ion-nav-view name="mainView" animation="slide-left-right">
<ion-view title="'Lista atrakcji'" right-buttons="rightButtons">
  <ion-content has-header="true">

	<form ng-submit="pobierzListeAtrakcji()">
	  <div class="list">
		<div class="item range range-positive">
		  5 km
		  <input type="range" name="w_promieniu" ng-model="filtry.w_promieniu" min="5" max="600" ng-change="pobierzListeAtrakcji()">
		  600 km
		</div>
	  </div>
	</form>
	<ion-list class="list">	</ion-list>
  </ion-content>
</ion-view>
</ion-nav-view>
  </ion-pane>

  <!-- Right menu -->
  <ion-side-menu side="right"></ion-side-menu>
</ion-side-menus>
2

Can you post that in a CodePen or something? It will make it a lot easier for us to assist.

See also :

3

Here You are:

Not posiible to move range. Testing in Chrome

4

This “works”.

However, it means that you can’t drag to open the side menu. You’d need a menu button. I accomplished this by adding drag-content="false" to the side menu content.

5

Can I at least assign drag-content="false" to ion-view? Than only one view wouldn’t have dragging not all app…

That is bug for me.

6

No you can’t. But there is a solution to that.

See this Plunker : http://plnkr.co/edit/WZFRfSfV2zVt1igpC3jY?p=preview

The drag-content attribute can be dynamically assigned in the controller. So, on this view with the range slider, you can disable the drag. Then on other views you can re-enable it.

This isn’t a permanent fix but will get you by for the interim.

There is a closed issue # 318 on this. It seems it was magically fixed at some point. However, it has come back. I’ve asked Adam to re-open the issue.

7

Thanks Calendee for help

8

Okay Adam has re-opened this issue.

9

Still being worked on. Doesn’t seem to work in beta or nightlies

10

Range element crashes the application with Android 4.0.4 (Wiko cink peax).

11

I am getting this error with the latest production release of Ionic on both Browser (Chrome and IE), and Native (Android and iOS). Some indicated this was fixed and returned last year. Well, it appears to be back again! :smile:

*Testing the work-around from here: https://github.com/driftyco/ionic/issues/318

(function() {"use strict";

    angular
        .module('MyApp.Directives.range', [])
        .directive('range', rangeDirective);

function rangeDirective() {
    return {
        restrict: 'C',
        link: function (scope, element, attr) {
            element.bind('touchstart mousedown', function(event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
            });
        }
    };
 }
})();
12

I had the same issues as @ericis - thanks for posting that workaround, it has currently resolved me issue.

EDIT: I spoke too soon. It worked temporarily, and now I can’t get the slider to move at all. Will get back with updates.