SliderFieldView

A numeric input field with an integrated slider for intuitive value adjustment.

SliderFieldView combines a text input field with a horizontal slider, allowing users to either type values directly or drag the slider handle. The component supports numeric ranges, rounding precision, and can be disabled. The slider provides visual feedback and makes it easy to explore value ranges.

Key features:

• Text input with numeric validation
• Integrated horizontal slider with draggable handle
• Configurable min/max value ranges
• Precision rounding support
• Keyboard focus and tab navigation
• Optional text input disabling (slider-only mode)
• Visual feedback for hover, focus, and disabled states

Usage example:

var slider = new SliderFieldView(0, 100); // min: 0, max: 100
slider.value = 50;
slider.round = 1; // round to integers
slider.enabledTextInput = true;
slider.onValueChange(this, (value, prev) -> {
    trace('Value changed to: ' + value);
});
add(slider);

Instance Members #

Custom theme override for this slider field. If null, uses the global context theme

The current numeric value of the slider

Minimum allowed value for the slider

Maximum allowed value for the slider

Whether the text input portion is enabled for direct typing

Visual style of the field (DEFAULT, OVERLAY, or MINIMAL)

Whether the entire slider field is disabled and non-interactive

Precision for value rounding.

• -1: No rounding (default)
• 1: Round to integers
• 10: Round to tenths (0.1)
• 100: Round to hundredths (0.01)
• etc.

Handles focus events for the slider field.

When the field gains focus, the text input is also focused for immediate editing.

Creates a new SliderFieldView with the specified value range.

Private Members #

Container view for the slider track and handle

The draggable handle/indicator of the slider

Event when theme field changes.

Event when value field changes.

Event when minValue field changes.

Event when maxValue field changes.

Event when enabledTextInput field changes.

Event when inputStyle field changes.

Event when disabled field changes.

Clips the text display to fit within the available text area.

Positions the slider handle based on the current value.

Calculates the handle position as a proportion of the value within the min/max range, accounting for container padding and handle width.

Applies rounding to a value based on the round precision setting.

Handles mouse/touch down events on the slider.

Starts slider interaction, sets initial value, and begins tracking pointer movement.

Handles pointer movement during slider dragging.

Updates the slider value based on the current pointer position.

Handles pointer release events, ending slider interaction.

Removes pointer tracking listeners when slider dragging ends.

Converts a horizontal slider position to a value within the min/max range.

Calculates the proportional value based on slider position, applies range limits and rounding, then updates the field value.

Metadata #