Slider

Description

The slider command creates an interactive slider control that allows users to select a value by dragging a handle along a track. The slider is positioned relative to the current draw cursor position and automatically maintains its own state.

Syntax

slider width height id

Parameters

• width: Width of the slider track in pixels

• height: Height of the slider track in pixels

• id: Unique identifier for the slider, used to access its value

• rounding: Similar to square, you can round the corners of the element

Usage Examples

// Basic volume slider
goto 100 100
slider 200 20 "volumeSlider"
log "Volume is set to: " ++ slider_volumeSlider

// Multiple sliders for RGB color mixing
goto 50 50
slider 300 15 "redSlider"
goto 50 80
slider 300 15 "greenSlider"
goto 50 110
slider 300 15 "blueSlider"
log output
// logs the value of the blue slider without needing its id

// implement a way to convert these to a hex colour from rgb
c rgb(slider_redSlider * 255, slider_greenSlider * 255, slider_blueSlider * 255)
square 100 100 10

// Slider with value display
goto 100 200
slider 250 25 "zoomSlider"
// Using ++ for direct concatenation without spaces
text "Zoom: " ++ round(zoomSlider * 100) ++ "%"

Important Notes

• The slider value is automatically stored in a variable matching the provided id

• Slider values range from 0 to 1 (0% to 100%)

• The slider handle position reflects the current value

• Sliders are interactive and respond to both mouse and touch input

• Multiple sliders can be used simultaneously with different IDs

• The slider position is relative to the current draw cursor

• Slider state persists between frames unless explicitly changed

• The ID must be unique to avoid conflicts with other UI elements