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

`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.