Region Selection (Double) Slider?

I need a control that will allow someone to select a region on graph… In the past I usable just used a mouse drag as it was usually for magnification…

But here, with every change in region beginning or end, I need do calculations with the points in the area and show numeric results to the user.
This is so that that they can tweak the area to get a desired result… (it’s hard to write an algorithm that will ALWAYS pick the right region)

Having a “double” slider makes that would lot easier that using mouse drags to select a region… What I am thinking about is “slider” like this:

      ^                           ^

I know I’ve seen something like the around in some apps in the past but I can’t recall where.

I could code “a” solution (though it would not be a reusable slider control - I don’t have the time for that right now, and I am not great at graphics), but I was wondering if anyone knows of an open source control such as that?

I won’t make any money off of this so It’s can’t be a paid solution.

I need it for Mac (going back to 10.7) and Windows (back to Win 7) desktop


From my personal experience with double sliders.

In the old Carbon days, you could do it by requesting the OS draw the slider track at a location, then the thumb at the two corresponding locations.
However those days are gone…

You could draw a slider at one of the positions (drawInto) and then probably hack a slider to override track drawing (so it doesn’t draw the track), then move the thumb to the second position and draw it again on top of the first.
It’s work and it’s prone to failures, when Apple change the slider style or behavior. Not to mention platform specific.

So I’d recommend thinking outside of the box, instead, create a entirely custom control, one that shows a mini preview of your chart with a custom selection rectangle or custom thumbs.

You could use two sliders, place them close to each other to make it clear that they are related and code them ensuring that the lower value is always lower or equal to the higher value.

I have seen two sliders used this way in more than one (graphics related) software packages, for example for manually adjusting the dynamic range of an image in ImageJ.


i would use a sub classed canvas.
normalize the position from left to right into a value 0 to 1 or -0.5 to 0.5.