7

So I've been working on a HTML5 iPad application for work and have come across a problem. I didn't have access to an iPad whilst first working on this app and relied on desktop Safari to get my app quickly together (probably not the best thing, anyhow...)

I'm having to rely on a input range for a part of the interface. After seeing that HTML5 had a range input, I was happy as this is just what I needed. I even managed to style it up to exactly what was designed:

HTML5 range input

This is great! ...until I actually tried it on an iPad and it doesn't work. Just shows a text input. I'm now wondering what to do... I do need a slider, something that when dragged, it spits out the data. Obviously needs to work with touch. After looking around all over the web, there doesn't seem to be a solid solution.

What do you guys suggest here? What's the proper way of coding up a working touch-friendly slider, just like the native HTML5 one that it doesn't support!?

Any ideas/thoughts/knowledge/experience would be greatly appreciated! James

littlejim84
  • 9,071
  • 15
  • 54
  • 77
  • http://caniuse.com/#feat=input-range seems to disagree that HTML5 range inputs should be a problem on mobile safari. It shows iOS safari 7.1 and 8.1 compatible. Anyone care to comment? – Sean Ahrens Feb 03 '15 at 09:55

7 Answers7

14

I tested all the proposed "solutions" and found them all lacking.
All are excessively bloated, some change your existing markup or force unnecessary CSS styles.

So I crafted my own solution in 2kb of JavaScript (minified).

Screenshot on iOS Device
Try it (on your mobile device): https://range-touch.herokuapp.com

Code: https://github.com/dwyl/range-touch (concise and commented)

To get this working in your own project all you need to do is include the
range-touch.min.js file in your page/template.

Magically <input type="range"> works on all mobile devices.

You can style the slider & button how ever you like.
I've included sample styles in the optional/style.css

Note: this solution Assumes you have JQuery or Zepto.js

nelsonic
  • 31,111
  • 21
  • 89
  • 120
  • 1
    This is great, love the lightweight solution and default styles! – pbojinov Jan 03 '14 at 09:33
  • This is great, but the fill (green) doesn't work for me with latest zepto – eozzy Apr 20 '14 at 15:25
  • 2
    Brilliant!!! Well documented, well-discussed, great links and example and images... God I wish every answer was like this! – Cyprus106 May 02 '14 at 18:47
  • @nelsonic, thank you! although i added a comment to the question above, i'd love for you to chime in on --- is html5 range input actually supported by iOS or not? – Sean Ahrens Feb 03 '15 at 10:00
  • @nelsonic also your http://nelsonic.s3.amazonaws.com/range-touch/index.html redirected from http://goo.gl/uWhbzg is down. – Sean Ahrens Feb 03 '15 at 10:01
  • @3zzy *thanks* for informing us of the ***breaking change*** introduced by our friends at Zetop.js ... I've *swapped* Zepto for **JQuery** (which still works as expected) – nelsonic Feb 03 '15 at 13:03
  • @SeanAhrens thanks for pointing out the broken link. I've changed it to: https://range-touch.herokuapp.com/ which will *never* break. ;-) – nelsonic Feb 03 '15 at 13:10
1

You could have a look over http://jqueryui.com/demos/slider/ . Try accessing the page on the iPad and see if it's touch friendly.

Cristian Necula
  • 1,247
  • 13
  • 17
  • The slider works for me (latest Mobile Safari), but doesn't slide. I can't drag the marker around, but it moves to wherever I touch on the slider. – slothbear Jun 27 '11 at 19:48
  • 1
    if you want to get jQuery UI and Touch Events work together, just use: http://touchpunch.furf.com/ –  Jul 05 '12 at 19:24
0

There's a fix for rangeinput from jquerytools for touch devices: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js

Works like a charm!

pstadler
  • 1,993
  • 1
  • 14
  • 24
  • rangeinput.js did not work for us. do you have a link to a demo where you got this working? thanks. – nelsonic Dec 18 '13 at 14:36
0

I have exactly the same problem, only with an iPhone.

This is because Mobile Safari only supports a subset of HTML5. I am using JqTouch which is causing me all manner of issues so do avoid this framework.

Take a look at jquery mobile. Its currently Alpha 3, but has a slider control which works on iOS.

Hope this helps you a little.

Mike James
  • 461
  • 2
  • 4
  • 20
  • 1
    I'm currently working deeply with Backbone JS. Do you think using jQuery Mobile just for a slider is too much? I'm also wondering if going with jQuery Mobile would be a better option for my application in general? Do you have much experience with it? Can Backbone JS and jQuery Mobile work nicely together I wonder? – littlejim84 Mar 30 '11 at 18:26
  • If you don't want the whole framework, go snag the slider code and any dependencies. – Jess Jacobs Apr 01 '11 at 17:20
  • @littlejim84 I'm currently using the full jQuery Mobile framework with Spine (similar to Backbone) and it works fine. jQuery Mobile can be applied to your app in bitesize pieces so I'd keep Backbone as well for the MVC features it provides. – hiddentao Oct 30 '11 at 12:41
0

Try this one - https://github.com/freqdec/fd-slider. Even the tooltip on the demo page is working on mobile safari - http://www.frequency-decoder.com/demo/fd-slider/tooltip/.

Nickolay Ninarski
  • 97
  • 1
  • 10
  • frequency-decoder.com appears to be **offline**. http://www.isup.me/frequency-decoder.com do you have an *alternative* link for demo? – nelsonic Dec 18 '13 at 14:34
-2

I found that you have to use a very light touch on Safari mini-tablet (or phone), and the slider works. If you press down too hard, Safari Mobile (or tablet), tries to bring up the "select/select all" pop-up bubble, as if it were a text field. Also, Safari on my tablet or phone thought that I wanted to "move the window around" - I have not found a solution to these issues yet. However, I did get the slider to work in Safari with a "light finger touch".

I found the following resources to be helpful:

Pen by Aron Woost: https://codepen.io/aronwoost/pen/nlyrf Here is a sample of Woost's code:

    input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

Daniel Stern: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

You can do a google search on " How to style range sliders in Webkit By Sara Vieira" and find her article.

I hope this helps.

user8534699
  • 1
  • 1
-4

An easy and quick SOLUTION!

The input range slider can be made User-Friendly on a mobile device by removing the troublesome highlight effect on the slider when tapped upon.

The Fix - Add the CSS property, -webkit-tap-highlight-color: transparent to the CSS of the element or the complete html page. This will remove the highlight effect on an element when it is tapped on a mobile device.

Animan
  • 312
  • 1
  • 10