Range Slider

[davivid]

I would find a range slider very handy. Any plans to implement one?

[UUSim]

These already exist:

• SliderFloat
• SliderFloat2
• SliderFloat3
• SliderFloat4
• SliderAngle
• SliderInt

[JarrettBillingsley]

I think he means a slider with two handles, used to specify a range of values?

[ocornut]

Could you specifi exactly what you need and how it would work?

[davivid]

Sorry that wasn't clear. I mean a slider with two handles that allows you to set a range of values, a left handle sets the min and a right handle sets the max. For example you might have a random int generator, but you want the values to be in the range 5 - 25 this function could use such a slider control.

[apessino]

Yup – I could definitely use that too, and in fact I would like both integer and floating point ranges. :) Thanks!

A=

---

Andrea Pessino (not female, just Italian)

Cofounder/Chief Technology Officer
Ready At Dawn Studios

From: davivid [mailto:notifications@github.com]
Sent: Monday, November 10, 2014 1:47 PM
To: ocornut/imgui
Subject: Re: [imgui] Range Slider (#76)

Sorry that wasn't clear. I mean a slider with two handles that allows you to set a range of values, a left handle sets the min and a right handle sets the max. For example you might have a random int generator, but you want the values to be in the range 5 - 25 this function could use such a slider control.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-62461229.

[ocornut]

OK.

Sliders currently always sets their value given the position of the click, so they'd have to be changed in this case to require clicking on the slider grab and handling mouse movement in a relative manner. This is already a desired feature for sliders when clicking close to the current value. Currently when clicking close to the current value you are pretty much guarantee to modify the value, but it should goes "relative movement mode" and wait for horizontal dragging. So this has to be supported first then we can rather easily add a "range / double slider" over it.

NB: Right now using SliderFloat2() + code that clamp values manually would be a reasonable workaround.

[ocornut]

Sorry this is still unresolved, such an old request!

For now I have added helpers using DragFloat / DragInt which don't have the same issues to solve as SliderFloat / SliderInt. So you don't visualize two boxes into the same frame but they are separate frame. Limits are enforced when you drag either sides (but as always you can always bypass limits using ctrl+click to input values).

DragFloatRange2()
DragIntRange2()

static float begin = 10, end = 90;
ImGui::DragFloatRange2("range", &begin, &end, 0.25f, 0.0f, 100.0f, "Min: %.1f %%", "Max: %.1f %%");

static int begin_i = 100, end_i = 1000;
ImGui::DragIntRange2("range int (no bounds)", &begin_i, &end_i, 5, 0, 0, "Min: %.0f units", "Max: %.0f units");

It's not "hard" do it for slider but right now it would require duplicating a bunch of code (100+ lines) which I'm not very happy with doing especially as the slider code is still in flux. In order to handle large int I first need to re-organize sliders and drags to that integer doesn't pass through a path that does int > float > int casting during edition.

[r-lyeh-archived]

I've started to do a custom range but it is far from being finished. What would be the best way to handle the logic/rendering for a couple of sliders/grabbers together in a same group? I am right now creating a group with a couple of dummies, a scrollbar, and rendering two sliders on top of it. I am wondering if this is the best way to achieve it.

edit:
preview

[Omar:Added attachment so that the data doesn't disappear in the future]
ranges.zip

[ocornut]

Perhaps post the code. You'd probably want to create new code based on a combination of what Slider_, Drag_ and Scrollbar* do.

[wasikuss]

I've almost finished range slider. Main work is concentrated on selecting nearest grip. Now I'm moving only first, but it works.

[wasikuss]

Almost done ;) It looks better ( no overlapping shapes ) and allows to drag closest grab to mouse position. There is bug in selecting closest grab - it should lock to currently dragged and do not change to other while moving. Additionally same rule could change color for only one of them.

You can look into https://github.com/wasikuss/imgui/tree/feature/range-slider or test it in https://github.com/wasikuss/imgui (soon emscripten playground will be added).

[bkaradzic]

@wasikuss I extracted your range slider into separate .inl/.h files and using ImGui's user includes for building it together with ImGui. This way it's easier to get integrated to other code before it's officially accepted.

Code is here:
https://github.com/bkaradzic/bgfx/blob/master/3rdparty/ocornut-imgui/widgets/range_slider.inl

One improvement could be that moving middle bar moves min/max values together.