This question is locked. New answers and comments are not allowed.
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
Clay
3 Answers, 1 is accepted
0
David Silveria
Top achievements
Rank 1
Rank 1
answered on 26 May 2013, 10:53 AM
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.
"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.
0
Clay
Top achievements
Rank 1
Rank 1
answered on 01 Jun 2013, 05:39 PM
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.
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.
0
Ashley
Top achievements
Rank 1
Rank 1
answered on 09 Sep 2015, 01:42 PM
input[type='range']
{
background: #0c0;
height:10px;
}
input[type='range']::-webkit-slider-thumb
{
background:#f60;
height:30px;
width:30px;
border-radius: 30px;
}