Recreating the HTML5 range input for Mobile Safari (webkit)?

Question

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:

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

Answer 1

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).

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

Answer 2

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.

Answer 3

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.

Answer 4

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/.

Answer 5

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!

Answer 6

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.

Answer 7

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.