GUI Slider Binding

# 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`. `value` is a `signal property`: observe it through the common data-binding API instead of a separate `valueChanged` event.

    import klyn.gui.windows
    import klyn.binding

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

    Binding.watch(slider::value, lambda(value: Object): print(value))

Setting `value` clamps it to the configured range and notifies watchers 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/SliderSample.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 bindings are notified 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/SliderSample.kn`. It combines several variants in one window and updates a status label from slider bindings.

    klyn samples/gui/SliderSample.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 DatePicker for calendar input, or open DockWorkspace when your application needs an IDE-like shell with retractable panes and central editor tabs.