Skip to main content
Sliders and drag widgets provide visual feedback for adjusting numeric values. They’re essential for parameters that need to be tweaked interactively.

​
Slider Widgets

​
SliderFloat()

Adjust a float value within a range: 
IMGUI_API bool SliderFloat(const char* label, float* v, float v_min, float v_max,
                           const char* format = "%.3f", ImGuiSliderFlags flags = 0);
​
label
const char*
required
Widget label
​
v
float*
required
Pointer to the value to modify
​
v_min, v_max
float
required
Minimum and maximum values
​
format
const char*
default:"%.3f"
Display format string (printf-style)
static float value = 0.5f;
ImGui::SliderFloat("Volume", &value, 0.0f, 1.0f);

// Custom format
static float percentage = 50.0f;
ImGui::SliderFloat("Opacity", &percentage, 0.0f, 100.0f, "%.0f%%");

​
SliderInt()

Adjust an integer value: 
IMGUI_API bool SliderInt(const char* label, int* v, int v_min, int v_max,
                         const char* format = "%d", ImGuiSliderFlags flags = 0);

static int quality = 50;
ImGui::SliderInt("Quality", &quality, 0, 100);

static int level = 1;
ImGui::SliderInt("Level", &level, 1, 10, "Level %d");

​
SliderAngle()

Slider specialized for angles: 
IMGUI_API bool SliderAngle(const char* label, float* v_rad,
                           float v_degrees_min = -360.0f, float v_degrees_max = +360.0f,
                           const char* format = "%.0f deg", ImGuiSliderFlags flags = 0);

static float angle = 0.0f;  // Stored in radians
ImGui::SliderAngle("Rotation", &angle);

// Custom range
ImGui::SliderAngle("Limited", &angle, -45.0f, 45.0f);

​
Multi-Component Sliders

​
SliderFloat2/3/4()

Slide multiple float values: 
IMGUI_API bool SliderFloat2(const char* label, float v[2], float v_min, float v_max,
                            const char* format = "%.3f", ImGuiSliderFlags flags = 0);
IMGUI_API bool SliderFloat3(const char* label, float v[3], float v_min, float v_max,
                            const char* format = "%.3f", ImGuiSliderFlags flags = 0);
IMGUI_API bool SliderFloat4(const char* label, float v[4], float v_min, float v_max,
                            const char* format = "%.3f", ImGuiSliderFlags flags = 0);

static float vec2[2] = { 0.0f, 0.0f };
static float vec3[3] = { 0.0f, 0.0f, 0.0f };
static float vec4[4] = { 0.5f, 0.5f, 0.5f, 1.0f };

ImGui::SliderFloat2("Position", vec2, -10.0f, 10.0f);
ImGui::SliderFloat3("Direction", vec3, -1.0f, 1.0f);
ImGui::SliderFloat4("Color", vec4, 0.0f, 1.0f);

​
SliderInt2/3/4()

Slide multiple integer values: 
static int ivec3[3] = { 10, 20, 30 };
ImGui::SliderInt3("Coordinates", ivec3, 0, 100);

​
Vertical Sliders

​
VSliderFloat() / VSliderInt()

Vertical slider widgets: 
IMGUI_API bool VSliderFloat(const char* label, const ImVec2& size, float* v,
                            float v_min, float v_max, const char* format = "%.3f",
                            ImGuiSliderFlags flags = 0);
IMGUI_API bool VSliderInt(const char* label, const ImVec2& size, int* v,
                          int v_min, int v_max, const char* format = "%d",
                          ImGuiSliderFlags flags = 0);

static float values[7] = { 0.0f, 0.60f, 0.35f, 0.9f, 0.70f, 0.20f, 0.0f };

for (int i = 0; i < 7; i++) {
    if (i > 0) ImGui::SameLine();
    ImGui::PushID(i);
    ImGui::VSliderFloat("##v", ImVec2(18, 160), &values[i], 0.0f, 1.0f, "");
    ImGui::PopID();
}

​
Drag Widgets

​
DragFloat()

Drag to adjust a float value: 
IMGUI_API bool DragFloat(const char* label, float* v, float v_speed = 1.0f,
                         float v_min = 0.0f, float v_max = 0.0f,
                         const char* format = "%.3f", ImGuiSliderFlags flags = 0);
​
v_speed
float
default:"1.0f"
Speed of value change per pixel of mouse movement
​
v_min, v_max
float
Optional range limits. Use v_min >= v_max for no bounds.
static float f1 = 1.00f;
ImGui::DragFloat("Drag float", &f1, 0.005f);

// With range
static int i2 = 42;
ImGui::DragInt("Drag int 0..100", &i2, 1, 0, 100, "%d%%", ImGuiSliderFlags_AlwaysClamp);

// Small values
static float f2 = 0.0067f;
ImGui::DragFloat("Drag small", &f2, 0.0001f, 0.0f, 0.0f, "%.06f ns");
Drag widgets are useful when you need:
  • Fine control over the value
  • No strict visual bounds
  • Keyboard/gamepad navigation with custom speed

​
DragInt()

Drag to adjust an integer value: 
IMGUI_API bool DragInt(const char* label, int* v, float v_speed = 1.0f,
                       int v_min = 0, int v_max = 0,
                       const char* format = "%d", ImGuiSliderFlags flags = 0);

static int i1 = 50;
ImGui::DragInt("Drag int", &i1, 1);

// With clamping
static int i2 = 42;
ImGui::DragInt("Drag int 0..100", &i2, 1, 0, 100, "%d%%", ImGuiSliderFlags_AlwaysClamp);

// With wrapping
static int i3 = 128;
ImGui::DragInt("Drag wrap 100..200", &i3, 1, 100, 200, "%d", ImGuiSliderFlags_WrapAround);

​
Range Widgets

​
DragFloatRange2()

Drag a range with min/max values: 
IMGUI_API bool DragFloatRange2(const char* label, float* v_current_min, float* v_current_max,
                               float v_speed = 1.0f, float v_min = 0.0f, float v_max = 0.0f,
                               const char* format = "%.3f", const char* format_max = NULL,
                               ImGuiSliderFlags flags = 0);

static float begin = 10.0f;
static float end = 90.0f;
ImGui::DragFloatRange2("Range", &begin, &end, 0.25f, 0.0f, 100.0f,
                       "Min: %.1f%%", "Max: %.1f%%", ImGuiSliderFlags_AlwaysClamp);

​
DragIntRange2()

static int begin_i = 100;
static int end_i = 1000;
ImGui::DragIntRange2("Range int", &begin_i, &end_i, 5, 0, 1000,
                     "Min: %d units", "Max: %d units");

​
Slider and Drag Flags

Customize behavior with flags: 
// Always clamp to min/max even with Ctrl+Click
ImGui::SliderFloat("##s", &v, 0.0f, 1.0f, "%.3f", 
                   ImGuiSliderFlags_AlwaysClamp);

// Clamp when manually inputting
ImGui::SliderFloat("##s", &v, 0.0f, 1.0f, "%.3f",
                   ImGuiSliderFlags_ClampOnInput);

// Clamp even when min==max==0
ImGui::DragFloat("##d", &v, 0.005f, 0.0f, 0.0f, "%.3f",
                 ImGuiSliderFlags_ClampZeroRange);

​
Ctrl+Click to Input

By default, users can Ctrl+Click on sliders/drags to input values directly: 
static float value = 0.5f;
ImGui::SliderFloat("slider", &value, 0.0f, 1.0f);
// User can Ctrl+Click to type a value directly
Hold Shift or Alt while dragging to adjust speed on the fly (slower or faster).

​
Generic Scalar Widgets

​
DragScalar() / SliderScalar()

Work with any data type: 
IMGUI_API bool DragScalar(const char* label, ImGuiDataType data_type, void* p_data,
                          float v_speed = 1.0f, const void* p_min = NULL, const void* p_max = NULL,
                          const char* format = NULL, ImGuiSliderFlags flags = 0);

IMGUI_API bool SliderScalar(const char* label, ImGuiDataType data_type, void* p_data,
                            const void* p_min, const void* p_max, const char* format = NULL,
                            ImGuiSliderFlags flags = 0);

static ImS64 s64_v = 0;
static ImU64 u64_v = 0;
ImS64 s64_min = -1000000000000000LL;
ImS64 s64_max = 1000000000000000LL;

ImGui::DragScalar("int64", ImGuiDataType_S64, &s64_v, 1.0f, &s64_min, &s64_max);
ImGui::SliderScalar("uint64", ImGuiDataType_U64, &u64_v, &u64_min, &u64_max, "%llu");

​
Complete Example

void ShowSliderDragDemo() {
    ImGui::Begin("Slider & Drag Demo");
    
    // Basic slider
    static float slider_f = 0.5f;
    ImGui::SliderFloat("Slider float", &slider_f, 0.0f, 1.0f, "%.3f");
    
    // Slider with custom format
    static int slider_i = 50;
    ImGui::SliderInt("Quality", &slider_i, 0, 100, "%d%%");
    
    ImGui::Spacing();
    
    // Angle slider
    static float angle = 0.0f;
    ImGui::SliderAngle("Angle", &angle);
    
    ImGui::Spacing();
    
    // Drag float
    static float drag_f = 1.0f;
    ImGui::DragFloat("Drag float", &drag_f, 0.005f);
    
    // Drag int with range
    static int drag_i = 50;
    ImGui::DragInt("Drag int 0..100", &drag_i, 1, 0, 100, "%d",
                   ImGuiSliderFlags_AlwaysClamp);
    
    ImGui::Spacing();
    
    // Range drag
    static float range_min = 10.0f;
    static float range_max = 90.0f;
    ImGui::DragFloatRange2("Range", &range_min, &range_max, 0.25f, 0.0f, 100.0f,
                           "Min: %.1f", "Max: %.1f", ImGuiSliderFlags_AlwaysClamp);
    
    ImGui::Spacing();
    
    // Multi-component
    static float vec3[3] = { 0.5f, 0.5f, 0.5f };
    ImGui::SliderFloat3("RGB", vec3, 0.0f, 1.0f);
    
    ImGui::Spacing();
    
    // Logarithmic slider
    static float log_val = 1.0f;
    ImGui::SliderFloat("Log scale", &log_val, 0.01f, 100.0f, "%.2f",
                       ImGuiSliderFlags_Logarithmic);
    
    ImGui::End();
}

​
Best Practices

Use ImGuiSliderFlags_AlwaysClamp to prevent users from entering out-of-range values via Ctrl+Click.
For DragXXX widgets, set v_min >= v_max to indicate no clamping bounds.
The v_speed parameter in DragXXX is per-pixel of mouse movement. Start with small values like 0.005f for floats.

Build docs developers (and LLMs) love

Get started for freeTalk to us