GUI Slider Events

Slider Widget

Slider is the typed GUI control for choosing an integer value inside a bounded range. It supports horizontal and vertical orientations, optional scale ticks, numeric labels, live value feedback, keyboard navigation, and KSS styling.

Basic Slider

A slider has a minimum, a maximum, and a current value. The default constructor creates a horizontal slider with value=50, minimum=0, maximum=100, and orientation=Slider.HORIZONTAL. Subscribe to valueChanged with the same multicast event syntax used by the other GUI widgets.

import klyn.gui.windows
import klyn.gui.windows.events

slider = Slider(value=25, minimum=0, maximum=100)

slider.valueChanged += lambda(event: ValueChangedEvent): print(event.value)

Setting value clamps it to the configured range and emits valueChanged only when the effective value changes.

Constructors

Prefer the value/range constructor in new code because it declares the initial slider contract in one place. The orientation-first constructor remains available for compact vertical slider declarations and compatibility with existing code.

Default horizontal slider

slider = Slider()

Equivalent to Slider(value=50, minimum=0, maximum=100, orientation=Slider.HORIZONTAL).

Value/range constructor

slider = Slider(value=75, minimum=0, maximum=100)
vertical = Slider(value=130, minimum=0, maximum=320, orientation=Slider.VERTICAL)

Orientation-first constructor

vertical = Slider(Slider.VERTICAL)
vertical = Slider(Slider.VERTICAL, value=130, minimum=0, maximum=320)

Visual Options

Use the visual properties when the slider represents a scale rather than a simple percentage. A simple slider keeps a round selector. When showTicks or showValues is enabled, the selector becomes pointer-shaped so the selected value aligns with the scale.

Scale properties

showTicks paints graduations. tickInterval controls the spacing and defaults to 10. showValues paints numeric values, including the minimum and maximum. liveValue shows a temporary tooltip while the user drags the selector.

values = Slider(value=75, minimum=0, maximum=100)
values.showTicks = true
values.showValues = true
values.tickInterval = 25
values.liveValue = true

Klyn slider demo showing default, filled, ticked, labeled, and vertical sliders — `samples/gui/DemoSlider.kn` shows the default selector, custom track fill, ticked scales, numeric values, vertical orientation, and live value feedback.

Orientation and Layout

Construct a vertical slider by setting orientation=Slider.VERTICAL or by using the orientation-first constructor. Horizontal sliders paint ticks and values below the track. Vertical sliders paint them on the right. Live values appear above horizontal sliders and to the left of vertical sliders while dragging.

verticalSlider = Slider(value=130, minimum=0, maximum=320, orientation=Slider.VERTICAL)
verticalSlider.tickInterval = 40
verticalSlider.showTicks = true
verticalSlider.showValues = true
verticalSlider.liveValue = true
verticalSlider.trackFillColor = Color(253, 86, 2, 1.0)

In layouts, give a horizontal slider expandable width with LayoutParams(1, 0). Give a vertical slider enough height when it carries ticks and values so labels do not compete with the rest of the form.

Keyboard and Focus

A slider can receive focus. When focused, the keyboard arrows adjust the value through the same path as pointer interaction, so valueChanged is emitted consistently. Application code can use adjustValueBy() when it needs an explicit step adjustment.

slider.adjustValueBy(1)
slider.adjustValueBy(-1)

Focus feedback depends on the selector shape: simple sliders show a ring around the round selector, while scaled sliders show a compact marker outside the pointer-shaped selector so the scale remains readable.

Styling with KSS

Slider thumbs use the resolved accent-color. The active part of the track can be set either in Klyn code with trackFillColor or in KSS with track-fill-color. Prefer KSS for theme-wide decisions and direct properties for data-specific colors.

Slider {
    color: var(--text);
    border-color: var(--border-soft);
    accent-color: var(--accent);
    track-fill-color: var(--accent-alt);
}

filled = Slider(value=45, minimum=0, maximum=100)
filled.trackFillColor = Color(34, 197, 94, 1.0)

Run the Sample

The full sample is in the distribution under samples/gui/DemoSlider.kn. It combines several variants in one window and updates a status label from slider events.

klyn samples/gui/DemoSlider.kn

Use this sample when changing slider painting, focus feedback, KSS themes, or keyboard behavior. It covers the combinations that are easy to regress visually.

Next Step

Continue with Canvas and Custom Painting when a standard widget is not enough and the application needs to draw its own geometry.