Sliders and Drags

Value adjustment widgets with visual feedback in Dear ImGui

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:

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