I have to implement a number range slider for a maximum width parameter. For example the lowest slider value is 500 and for the highest I set it to a reasonable value of 3.000.

First the user chooses if he wants to set a value or not. I'm thinking of using a checkbox that enables/disables the slider. If the user didn't want to set a value then the result is there is no maximum width, which is the same as saying the maximum width is infinite.

My question: is there any way to avoid the use of the checkbox? A way could be to set a really high value in the slider (for example 10.000). But this would make the slider hard to use for real values.

| improve this question | | | | |

If the user wants to set a value, with a value range between 500-3000, it can be challenging to navigate to a precise value (especially trying to drag within a mobile touch environment). In most cases, input boxes will be more efficient so it's something that you may consider include as part of the UI or even ditch the range slider in favor of the inputs.

If precise width does not matter, maybe consider a tiered slider that contains milestones and have the max to be unlimited. enter image description here

| improve this answer | | | | |
  • Thank you :) Ill include an input as well. Very interesting the milestones you suggest. – Alvaro Feb 25 '17 at 9:53

Maybe something like this could work:

Display the minimum value in a disabled text input and the maximum with 3000+(indicating more than 3k) value.


| improve this answer | | | | |
  • Thank you for the suggestion :) I'm not convinced about including two inputs where one is disabled. But I like the idea of indicating the minimum value and the maximum which would go from 2999 to 3000+ or no limit or similar. – Alvaro Feb 25 '17 at 9:55

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.