Sliders and Drags - 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

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.

Documentation Index

​Slider Widgets

​SliderFloat()

​SliderInt()

​SliderAngle()

​Multi-Component Sliders

​SliderFloat2/3/4()

​SliderInt2/3/4()

​Vertical Sliders

​VSliderFloat() / VSliderInt()

​Drag Widgets

​DragFloat()

​DragInt()

​Range Widgets

​DragFloatRange2()

​DragIntRange2()

​Slider and Drag Flags

​Ctrl+Click to Input

​Generic Scalar Widgets

​DragScalar() / SliderScalar()

​Complete Example

​Best Practices

Slider Widgets

SliderFloat()

SliderInt()

SliderAngle()

Multi-Component Sliders

SliderFloat2/3/4()

SliderInt2/3/4()

Vertical Sliders

VSliderFloat() / VSliderInt()

Drag Widgets

DragFloat()

DragInt()

Range Widgets

DragFloatRange2()

DragIntRange2()

Slider and Drag Flags

Ctrl+Click to Input

Generic Scalar Widgets

DragScalar() / SliderScalar()

Complete Example

Best Practices