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:
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 ;)