(questions) How to create a Range Slider ?

[ebachard]

Hello,

My current need is to use an horizontal range slider, e.g. for a slideshow with frames in a video. If they could follow the same colored style the current vertical sliders currently do in your demo, it would be perfect for me :-)

(as a simple) example below, Vmin = 1, Vmax = 1000, Rmin = 200 and Rmax = 500.

As a summary, the need could be to display an horizontal slider + two colored rectangles + the Rmin and Rmax values + a colored region between them , as visible information for the user.

I searched in ImGui code and found nothing like that. Or maybe SliderAngle ? In this link http://danielcrisp.github.io/angular-rangeslider/demo/ it's question of SliderAngle, but I'm a bit confused.

Last, in the ImGui demo window, there are two rectangles doing what I need, but it looks unfinished (if I'm not wrong).

Question 1 : what about add this control in the list ? (see the proposed interface below)

--- old/imgui.h 2017-08-28 10:50:13.000639675 +0200
+++ new/imgui.h 2017-08-28 10:53:29.120236271 +0200
@@ -313,11 +313,13 @@

   // Widgets: Sliders (tip: ctrl+click on a slider to input with keyboard. manually input values aren't clamped, can go off-bounds)
   IMGUI_API bool          SliderFloat(const char* label, float* v, float v_min, float v_max, const char* display_format = "%.3f", float power = 1.0f);     // adjust display_format to decorate the value with a prefix or a suffix for in-slider labels or unit display. Use power!=1.0 for logarithmic sliders  
+  IMGUI_API bool          RangeSliderFloat(const char* label, float* v, float v_min, float v_max, float* r, float r_min, float r_max, const char* display_format = "%.3f", float power = 1.0f);
   IMGUI_API bool          SliderFloat2(const char* label, float v[2], float v_min, float v_max, const char* display_format = "%.3f", float power = 1.0f);
   IMGUI_API bool          SliderFloat3(const char* label, float v[3], float v_min, float v_max, const char* display_format = "%.3f", float power = 1.0f);
   IMGUI_API bool          SliderFloat4(const char* label, float v[4], float v_min, float v_max, const char* display_format = "%.3f", float power = 1.0f);
   IMGUI_API bool          SliderAngle(const char* label, float* v_rad, float v_degrees_min = -360.0f, float v_degrees_max = +360.0f);
   IMGUI_API bool          SliderInt(const char* label, int* v, int v_min, int v_max, const char* display_format = "%.0f");
+  IMGUI_API bool          RangeSliderInt(const char* label, int* v, int v_min, int v_max, int* r, int r_min, int r_max, const char* display_format = "%.0f");
   IMGUI_API bool          SliderInt2(const char* label, int v[2], int v_min, int v_max, const char* display_format = "%.0f");
   IMGUI_API bool          SliderInt3(const char* label, int v[3], int v_min, int v_max, const char* display_format = "%.0f");
   IMGUI_API bool          SliderInt4(const char* label, int v[4], int v_min, int v_max, const char* display_format = "%.0f");

Question 2 : do you suggest another solution / workaround ?

What do you think ? Thanks in advance for your answer :-)

Edit : modified what had to be drawn

[ocornut]

Hello,

You can use DragFloatRange2 as a workaround, but it doesn't exactly look the same as what you want.

It is totally doable to make the slider range but right now I myself have other priorities. I would probably want to refactor the internal slider code quite a bit and consider the Navigation branch (~navigation within the range slider to select either sides). You can look at the code and try to make one yourself by copying the slider code.

Closing as duplicate of #76. Please move the conversation there.

[ebachard]

Sorry, I see a simple search in the issues gives me the answer. Apologies for the noise :-/

Of course, I'll continue with #76 as suggested.

Thanks a lot for your fast answer !