Ionic Custom Range directive

demo
1

Hi everybody,

I’ve create a simple ion-custom-range directive that looks and behaves the same as input range component, but the main difference is that it doesn’t block vertical scrolling.

I hope you’ll find it useful.

Here is the code:

Example (only works on mobile browsers, or emulators because of touch events). Here is how you can try it in desktop Chrome browser:

  1. Open Google Chrome and enable Device Mode (first open Developer
    tools and on the top left, next to search icon there is a mobile icon)
  2. Next, paste: http://play.ionic.io/m/21bd28e1ab0e
2

I’m curious: how does the normal range input block scrolling?

3

Well, the problem is that input range doesn’t propagate touchstart event, so unless you press anywhere else outside of the element, you can’t scroll vertically in ion-content. This is especially visible if you have multiple input range controls on the same page.

Here are two bug reports about this issue:


4

@ bokboki2002 thanks a lot, you gave me input and solved my problem of double range slider in ionic.

I have extended you code for this and add other functionalities like click handler, tips and double range
Demo of the code

http://ion-custom-range.ask4kapil.xyz/

Sample App code:

Plugin:

5

Hi there, it seems there is an error with the code, the scrubber and progress line do not reach the end of the static line when the slider is set to max. Any ideas why this might be? Thanks