1

I have a range slider with two input controls, each with a higher/lower button. The user should be able to make his input by sliding (fast but not accurate), typing into the inputs (average speed, very accurate) and by stepping with the higher/lower buttons (very accurate but slow). There should be also a label that shows the current range.

So my design for this looks like in the image below:

download bmml source – Wireframes created with Balsamiq Mockups

My problem with this is, that I have to take a responsive (and touch friendly) web layout into consideration. I have no idea what the best way would be to present the elements to the user on a mobile device. The input controls above the slider are each around 150px in width, so placing them on the same line will not look very good. Also there should be a label to tell the user what he is going to change here. And maybe in future there will be sth. like a dropdown to select a unit for the values.

I thought of stacking the controls on each other but the result won't be very pleasing. I hope you have some better ideas ;)

Improve this question

2 Answers 2

Reset to default
2

You can keep hidden the two input controls, and show them only when the user taps one of the extremes:

enter image description here

User should be able to drag extremes, which may also contain the current values.

Improve this answer
1

You could chunk the complexity into a lower limit and an upper limit, and optionally a difference between the two if this is useful.

Increasing the lower limit above the upper limit automatically shunts the upper limit along, while decreasing the upper limit below the lower limit automatically shunts the lower limit down.

If the user has manually entered a 'difference' then the shunting of the values could maintain that difference where possible.

If you last adjusted lower limit, then entering a difference adjusts the upper limit as a priority.

If you last adjusted the upper limit, then entering a difference adjusts the lower limit as a priority.

enter image description here

Alternatively a more symmetrical layout...but not so good when hand/fingers are in the way of the value!

enter image description here

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.