6

I'm looking for a userfriendly solution to change two values by only one slider. enter image description here
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?

10
  • Can I ask whether it is imperative to have only one slider? It seems you have an issue where the values can be taken lower than the value of the adjoining slider point, which is strange. Apr 24, 2015 at 8:52
  • If I use to fingers to manipulate both knobs at once, do they end up in the same value if I pinch and then release my fingers touching each other as closely as possible? This design affords simultaneous interaction, you know.
    – Crissov
    Apr 24, 2015 at 9:01
  • @DarrylGodden no, it's not imperative, but would be nice or more clear, as the slider could represent an in-range or out-of-range whereas I could highlight the bar between the knobs. And one knob cannot pass the other one.
    – blaster
    Apr 24, 2015 at 9:20
  • @Crissov touching both knobs with one finger each does not have to be possible, but if so, the each knob should be moved independently.
    – blaster
    Apr 24, 2015 at 9:21
  • @blaster how aware are you of your data? Generally, would the min & max values be reasonably separate, or could they be closer? What's the min & max scale of the slider? Apr 24, 2015 at 9:23

5 Answers 5

24

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.

mockup

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)

2
  • @DA01 Only if there are 2 'thumbs' being used. Any more and it suffers the same issues as the one in the question (but then at that point you'd probably want to be considering a totally different control anyway).
    – JonW
    Apr 24, 2015 at 14:28
  • I can live with this, although I need to redesign the sliders with only one dragger. to avoid different styles for a similar purpose.
    – blaster
    Apr 27, 2015 at 6:40
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).

1

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.)

1

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.

Android-like slider

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.

0

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
    }
}

Your Answer

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

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