Touchable slider with two sliders - best practice

Question

I'm looking for a userfriendly solution to change two values by only one slider.
I have an upper and a lower threshold whereas each value is represented by a knob on the slider. As I'm dealing with touchscreens, each knob has a clickable-region. If the knobs are close to each other, thus overlapping regions, the user will always select the knob layered on top. The only way I could think of solving this would be allowing the user to click again and then selecting the other knob.
Assume the following situation:
1) User shifts the left knob close to the right one
2) User wants to shift the right button even further right but he will grab the left one because this was layered on top by default.
3) User has to click again on the region to select the other button
4) After all this, the user can press again and drag. The other solution would be to start dragging as soon as the second click was performed.

Another solution would be to place some radio buttons close by and select the slider.
Another issue is of course the fine adjustment of the sliders, thus I need to place some +/- button somewhere. I'd like to just place one set of +/- not for both, which would lead to always have one knob active.

Is there any guideline out there which addresses such an issue?

Answer 1

There are too many issues with overlaying two different dragable items on the same control. For one - if you want both values to be the same then it's going to be hard to see that there are two indicators, or if you then want to adjust one of them it's difficult to make sure you're grabbing the correct item.

If there are only two drag points, then why not go with an above/below approach? That makes it easier to see which indicator is which, and allows you finer adjustments.

^{download bmml source – Wireframes created with Balsamiq Mockups}

(You'll probably want some text fields in there too, for people who don't want to / can't drag items. But that's a separate point really)

Answer 2

I solved a similar requirement by providing multiple sliders and linking them together, so that they "validate" against each other (UI to configure shifts - which ultimately comes down to start times). Right pictures indicate boundary conditions (min and max, so to speak):

Shift 1: --|--------------------- 02:00        |-----------    ---------|--
Shift 2: ----------|------------- 10:00        -|----------    ----------|-
Shift 3: ------------------|----- 18:00        --|---------    -----------|

Reckon for that to be applicable, having a discrete range of values might need to be a requirement (in my case shifts may start at half-hour increments).

Answer 3

I like JonW's solution better, but another possibility is that once the two thumbs are sufficiently close, you could halve the clickable regions of each thumb so that the left thumb's clickable region is its left half and the right thumb's clickable region is its right half. (Or you could continuously adjust the clickable regions as the distance between them changes; the point is to ensure that they never overlap.)

Answer 4

Another alternative. Move the "active" points on your thumbs from the middle of the thumb to the right side of the left thumb and the left slide of the right thumb similar to what Android does with it's text cut/copy functionality.

This has the advantage that both thumbs are on the same side, reducing the amount of vertical space needed and make it possible to move both thumbs at the same time if desired and still has the attribute that they wouldn't overlap each other.

Answer 5

JonW's solution is likely the best in terms of making the sliders visibly distinct to the user, and if I were implementing this, is likely what I would go with.

However, if not using above/below and using the original setup another possible solution is to check if the regions are overlapping and if so, select the slider that has the closest origin to the input point.

on_input()
{
    if(MinSlider.Contains(inputLocation) AND MaxSlider.Contains(inputLocation))
    {
        minLength = DistanceBetween(MinSlider.Origin, inputLocation)
        maxLength = DistanceBetween(MaxSlider.Origin, inputLocation)
        if(minLength <= maxLength)
        {
            //Select Minimum Slider
        }else{
            //Select Maximum Slider
        }
    }else{
        //Regular selection based on region
    }
}