Range input type on mobile

4 posts, 0 answers
  1. Clay
    Clay avatar
    5 posts
    Member since:
    Feb 2013

    Posted 24 May 2013 Link to this post

    I have an app that I am trying to input a number between 1 and 10 and saving that input. On the simulator, it worked 'OK', but on my iPhone, it doesn't really work at all. It works, but it isn't nice to use. What would be a better method for a graphical numeric input? I supposed I could just use a text input or some sort of up/down buttons, but my client was hoping for a slider.  Thanks.

    Clay
  2. David Silveria
    David Silveria avatar
    234 posts
    Member since:
    May 2006

    Posted 26 May 2013 Link to this post

    This comparison sheet (http://www.quirksmode.org/html5/inputs_mobile.html), says input type=range has quite a peculiar behavior on iOS:
    "on iOS, where you first have to tap the slider button and then you can slide it. This interaction is not up to Apple’s usual high standards."

    If this is what you see on your dev., it is the expected one. You can consider using jquery or kendo slider.
  3. Clay
    Clay avatar
    5 posts
    Member since:
    Feb 2013

    Posted 01 Jun 2013 Link to this post

    What I found funny in solving this is that I was looking in the wrong area. I had 3 problems.
     1) I had an output to the left of my slider that was adjusting to 2 digits and so the html rendering was getting taxed trying to calculate the spacing. When I used css to make the output block wide enough to accomodate both digits, it sped up considerably.
     2) I was saving the data to the db at the onchange event. That was happening a lot and was slowing it down.
     3) Lastly, I needed to make the thumb on the slider bigger. I had it 24X24 and things are much better at 30X30 or bigger.
  4. Ashley
    Ashley avatar
    2 posts
    Member since:
    Sep 2015

    Posted 09 Sep 2015 Link to this post

    input[type='range']

    { background: #0c0; height:10px; }

     

    input[type='range']::-webkit-slider-thumb

    { background:#f60; height:30px; width:30px; border-radius: 30px; }

Back to Top