Slider widgets

The slider family is bounded numeric editing along a fixed track: click the track to jump, drag the handle to scrub. Same call shape spans scalar / vector / vertical and float / int — ten widgets, one mental model.

slider_float(IDENT, (text = "..", format = "%.3f",
                     flags = ImGuiSliderFlags....))
slider_int(IDENT, (text = "..", format = "%d"))
slider_float2 / slider_float3 / slider_float4   // vector forms
slider_int2   / slider_int3   / slider_int4
vslider_float(IDENT, (text, size = float2(w, h), format = "%.3f"))
vslider_int(IDENT, (text, size, format))

Bounds are required — slider has a fixed-width track between (state.bounds.min, state.bounds.max). Unlike drag, zero-init bounds (0, 0) collapses the track to a single point.

Source: examples/tutorial/slider.das.

Walkthrough

  1options gen2
  2
  3require imgui
  4require imgui_app
  5require opengl/opengl_boost
  6require live/glfw_live
  7require live/live_api
  8require live/live_commands
  9require live/live_vars
 10require live_host
 11require imgui/imgui_live
 12require imgui/imgui_boost_runtime
 13require imgui/imgui_boost_v2
 14require imgui/imgui_widgets_builtin
 15require imgui/imgui_containers_builtin
 16require imgui/imgui_visual_aids
 17
 18// =============================================================================
 19// TUTORIAL: slider widgets — bounded numeric editing along a fixed track.
 20//
 21//   slider_float(IDENT, (text = "..", format = "%.3f",
 22//                        flags = ImGuiSliderFlags....))
 23//   slider_int / slider_float2/3/4 / slider_int2/3/4 / vslider_float /
 24//   vslider_int — same shape; scalar / vector / vertical variants.
 25//
 26// Bounds REQUIRED — slider has a fixed-width track between
 27// (state.bounds.min, state.bounds.max). Unlike drag, zero-init bounds
 28// = (0, 0) collapses the track to a single value.
 29//
 30// vslider takes a `size : float2` arg (width, height) and renders the
 31// track top-to-bottom; otherwise identical to slider_float.
 32//
 33// STANDALONE: daslang.exe modules/dasImgui/examples/tutorial/slider.das
 34// LIVE:       daslang-live modules/dasImgui/examples/tutorial/slider.das
 35//
 36// DRIVE (when running live):
 37//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"SLIDER_WIN/S_FLOAT","value":0.8}}' \
 38//        localhost:9090/command
 39//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"SLIDER_WIN/S_VEC3","value":[1.0,2.0,3.0]}}' \
 40//        localhost:9090/command
 41// =============================================================================
 42
 43[export]
 44def init() {
 45    live_create_window("dasImgui slider tutorial", 760, 520)
 46    live_imgui_init(live_window)
 47    let io & = unsafe(GetIO())
 48    GetStyle().FontScaleMain = 1.4
 49}
 50
 51[export]
 52def update() {
 53    if (!live_begin_frame()) return
 54    begin_frame()
 55
 56    ImGui_ImplGlfw_NewFrame()
 57    apply_synth_io_override()
 58    NewFrame()
 59
 60    SetNextWindowPos(ImVec2(20.0f, 20.0f), ImGuiCond.Always)
 61    SetNextWindowSize(ImVec2(720.0f, 480.0f), ImGuiCond.Always)
 62    window(SLIDER_WIN, (text = "slider tutorial", closable = false,
 63                        flags = ImGuiWindowFlags.None)) {
 64
 65        text("Click anywhere on the track to jump; drag the handle to scrub.")
 66        text(S_HINT, (text = "Bounds REQUIRED - track spans (lo, hi) literally."))
 67        separator()
 68
 69        // ---- Stage 1: scalar float, 0..1 ----
 70        S_FLOAT.bounds = (0.0f, 1.0f)
 71        slider_float(S_FLOAT, (text = "volume", format = "%.2f"))
 72        text("S_FLOAT.value = {S_FLOAT.value}")
 73        spacing()
 74
 75        // ---- Stage 2: scalar int, 0..100 ----
 76        S_INT.bounds = (0, 100)
 77        slider_int(S_INT, (text = "percent", format = "%d%%"))
 78        text("S_INT.value = {S_INT.value}")
 79        spacing()
 80
 81        // ---- Stage 3: vector — three handles on one row ----
 82        S_VEC3.bounds = (-1.0f, 1.0f)
 83        slider_float3(S_VEC3, (text = "rotation", format = "%.2f"))
 84        text("S_VEC3.value = ({S_VEC3.value.x}, {S_VEC3.value.y}, {S_VEC3.value.z})")
 85        spacing()
 86
 87        // ---- Stage 4: vertical orientation — same state, different layout ----
 88        text("Vertical sliders (vslider_float) share SliderStateFloat:")
 89        V_LO.bounds = (0.0f, 1.0f)
 90        V_MID.bounds = (0.0f, 1.0f)
 91        V_HI.bounds = (0.0f, 1.0f)
 92        vslider_float(V_LO, (text = "##lo",
 93                             size = float2(36.0f, 140.0f), format = "%.2f"))
 94        same_line(SLINE_1)
 95        vslider_float(V_MID, (text = "##mid",
 96                              size = float2(36.0f, 140.0f), format = "%.2f"))
 97        same_line(SLINE_2)
 98        vslider_float(V_HI, (text = "##hi",
 99                             size = float2(36.0f, 140.0f), format = "%.2f"))
100    }
101
102    end_of_frame()
103    Render()
104    var w, h : int
105    live_get_framebuffer_size(w, h)
106    glViewport(0, 0, w, h)
107    glClearColor(0.10f, 0.10f, 0.12f, 1.0f)
108    glClear(GL_COLOR_BUFFER_BIT)
109    live_imgui_render()
110
111    live_end_frame()
112}
113
114[export]
115def shutdown() {
116    live_imgui_shutdown()
117    live_destroy_window()
118}
119
120[export]
121def main() {
122    init()
123    while (!exit_requested()) {
124        update()
125    }
126    shutdown()
127}

Requires

Already in the baseline boost layer:

  • imgui/imgui_widgets_builtin — every slider_* / vslider_* rail.

  • imgui/imgui_boost_runtime — SliderStateFloat / SliderStateInt / vector state structs.

Bounds

Bounds are a property of the state, not the call. Set them every frame (idempotent assignment, no branching):

S_FLOAT.bounds = (0.0f, 1.0f)
slider_float(S_FLOAT, (text = "volume", format = "%.2f"))

The wrapper passes (min, max) to ImGui’s SliderFloat which constrains the handle. Unlike Drag widgets, zero bounds are not unclamped — the track has nowhere to render.

Format

format is the printf-style label format. Default "%.3f" / "%d"; customize for units:

slider_int(S_INT, (text = "percent", format = "%d%%"))    // 42%
slider_float(S_TEMP, (text = "temp", format = "%.1f °C")) // 23.5 °C

Vector forms

The 2 / 3 / 4 suffix puts that many handles on one row. state.value becomes float2 / float3 / float4 (or int2 / int3 / int4):

S_VEC3.bounds = (-1.0f, 1.0f)        // applies to every component
slider_float3(S_VEC3, (text = "rotation", format = "%.2f"))
// S_VEC3.value.x, S_VEC3.value.y, S_VEC3.value.z

Vertical orientation

vslider_float / vslider_int share the same state struct as the horizontal form, but render the track top-to-bottom. The distinguishing arg is size : float2 (width, height):

V_MID.bounds = (0.0f, 1.0f)
vslider_float(V_MID, (text = "##mid",
                      size = float2(36.0f, 140.0f), format = "%.2f"))

Common pattern: three vslider_floats with same_line between them form a mixer-channel strip. The "##mid" text prefix hides the label (everything after ## is ID-only); use "label" instead to display it above the slider.

Driving from outside

Every slider exposes the same telemetry channel — imgui_force_set writes state.pending_value which the next frame consumes:

# Scalar:
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"SLIDER_WIN/S_FLOAT","value":0.8}}' \
     localhost:9090/command
# Vector — one number per component:
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"SLIDER_WIN/S_VEC3","value":[1.0,2.0,3.0]}}' \
     localhost:9090/command

The dispatcher ([widget_dispatch] on SliderStateFloat and friends) accepts the right JSON shape per state type — scalar number or array of numbers.

Slider vs drag vs input

The three numeric-edit families differ in interaction shape:

  • slider — click and drag along a fixed-width track between v_min / v_max. Best for bounded percentages, settings sliders.

  • drag — click and scrub, no fixed track. Best for “tweak this value” where the range is large or open-ended.

  • input — type the number, optionally with + / - step buttons. Best for precise values where the user knows the number.

All three families share the same vector / scalar / format conventions. See Drag widgets.

Caller-owned variant

For sites where the value lives on an external scalar (not a widget state struct), use the edit_slider_* rail instead — it takes a T? pointer via safe_addr and skips the state-struct allocation:

var g_volume : float = 0.5f
edit_slider_float(safe_addr(g_volume), (id = "VOLUME",
                                        text = "volume",
                                        v_min = 0.0f, v_max = 1.0f))

See External-pointer editing rail.

See also

Full source: examples/tutorial/slider.das

Features-side demo: examples/features/inputs_slider.das / examples/features/edit_vsliders.das — every slider in one window, useful for imgui_force_set smoke testing.

Sibling tutorial: Drag widgets.

Boost macros — the macro layer.