I have a configuration dialog that contains a percentage slider:

enter image description here

The user can set a range of 10% to 90% on this slider (don't ask why). In reality, the user is actually configuring a range with a 5% margin. So if the user sets the slider on 25%, in the background, the range is set to 20%-30%. The margin cannot be defined by the user.

I was wondering if I should inform the user that a margin is used instead of the specific percentage the user is configuring, and if yes how I should do this.

I was thinking of simply changing the percentage label behind the slider to 35% - 45% or highlighting a small area left and right of the slider handle like so:

enter image description here

or a combination of both.

  • Will the margin ever be revealed to the user? For example, if they choose 25%, will it show somewhere in the settings that they chose 20%-30%, because that discrepancy may cause confusion.
    – DasBeasto
    Mar 17, 2016 at 12:25

1 Answer 1


I think changing the label to show the whole range instead of just the centerpoint is a must.

Merely changing the area behind the selector handle is likely to be misinterpreted as being a larger handle. Because with scrolling interfaces, you often get scaling issues.

But while just highlighting the background isn't enough, it can be modified to make it more usable. I mentioned it being confused for a larger handle... how about just making it the handle? It'll make it a larger touch target as well as show the whole range, while being less visually cluttered than having both handle and highlight:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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