I need to create a touch component that acts like a spin box (or stepper) except it increments the value in the box more than one at a time, specifically 50 at a time.

  • The range of values in the box is 0 to 1600.
  • You can only edit the value using the increment/decrement buttons.
  • Space is constrained, so using a slider isn't possible. I am considering using 2 sets of steppers, one for +/-100 and +/-50 to be able to traverse the range of values faster.

I attempted the obvious solution, but it looked too busy to me: enter image description here

Is the 'increment by amount' something that generally should be displayed to the user if it's not 1, or can it be omitted since users will end up quickly figuring through usage?

If the former, are there any examples of spin box components that have 'increment by amount' greater than 1? Currently the biggest useage I see for spin boxes are for selecting a quantity of something to buy, which are almost always increment by 1 controls.

  • Is this an enforced range in the sense that it has to be divisible by the 50 increment? What happens if I type a random value that's non-divisible by the increment controls?
    – Mike M
    Jul 31 '17 at 21:02
  • You can't type, you can only use the +/- buttons to change the value. I'm not sure if this means it's no longer a spin box... Jul 31 '17 at 21:03
  • 1
    At the very least, don't make the number look like an editable field if the user can't type into it. Jul 31 '17 at 21:20
  • @plainclothes In the UI i'm working on, most field are not directly editable by users, so the few fields that are editable are clearly highlighted to users. Jul 31 '17 at 21:25

Slider would be better, to go from 0 to 1600 in steps of 50 could be 32 presses of that button.

Very poor experience.


  • Unfortunately we are space constrained. An alternative we considered was having 2 different sets of steppers, one for 50 and one for 100. But I'm not sure how to approche that, I haven't seen any real world use of multiple sets of steppers per spin box. Jul 31 '17 at 21:17
  • 3
    If space is an issue, I would just get people to type it in, with validation. Even with a 100 button, which you wouldn't be far off the slider width, would still be 16 taps, again not a great experience. Aug 1 '17 at 6:37
  • After discussing, this is the solution we are going with. Thanks! Aug 1 '17 at 14:14

I would'nt show the increment , is it a solution for you to use a forward ( + 50 ) an fast forward ( + 100 ) ? Two buttons ... like you can do on your blueray player. Known controls on may devices.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.