Slider

Select numeric values by moving a handle along a horizontal track.

Slider is a focusable widget that allows users to select a value from a continuous or stepped range. It supports keyboard navigation (arrow keys, Home/End, PageUp/PageDown) and mouse click-to-position.

Basic Usage

Create a slider using the fluent API. By default, sliders use a 0-100 range:

csharp

dotnet run

State Management

Slider value state is managed internally by the node and preserved across re-renders. Use the OnValueChanged event to synchronize with your own application state.

Custom Range

Specify custom minimum and maximum values for any numeric range:

csharp

// Temperature range
v.Slider(initialValue: 22, min: -10, max: 40)

// Percentage with decimals
v.Slider(initialValue: 0.5, min: 0, max: 1)

// Large values
v.Slider(initialValue: 5000, min: 0, max: 10000)

Step Values

Use the step parameter to create discrete value increments. Values snap to the nearest step:

csharp

// Steps of 10: 0, 10, 20, 30, ...
v.Slider(initialValue: 50, min: 0, max: 100, step: 10)

// Steps of 5: 0, 5, 10, 15, ...
v.Slider(initialValue: 25, min: 0, max: 100, step: 5)

When no step is specified, the slider uses continuous values with a small default step of 1% of the range.

Keyboard Navigation

Slider supports comprehensive keyboard navigation:

Key	Action
← Left Arrow	Decrease value by step
→ Right Arrow	Increase value by step
↑ Up Arrow	Increase value by step
↓ Down Arrow	Decrease value by step
Home	Jump to minimum value
End	Jump to maximum value
PageUp	Increase by 10% of range
PageDown	Decrease by 10% of range

Large Steps

The PageUp/PageDown step size is configurable via the LargeStepPercent property (default: 10% of range).

Mouse Support

In terminals that support mouse input, users can click anywhere on the track to jump directly to that position. The slider calculates the corresponding value based on the click position.

Value Changed Event

Use OnValueChanged to respond when the user adjusts the slider:

v.Slider(50)
    .OnValueChanged(e =>
    {
        Console.WriteLine($"Value: {e.Value}");
        Console.WriteLine($"Previous: {e.PreviousValue}");
        Console.WriteLine($"Percentage: {e.Percentage:P0}");
    })

The SliderValueChangedEventArgs provides:

Property	Type	Description
Value	double	The new slider value
PreviousValue	double	The value before the change
Minimum	double	The minimum of the range
Maximum	double	The maximum of the range
Percentage	double	Current value as 0.0-1.0 percentage
Widget	SliderWidget	The source widget
Node	SliderNode	The underlying node
Context	InputBindingActionContext	The input context

Audio Mixer Example

Multiple sliders with labels in a form layout:

csharp

dotnet run

Layout Behavior

By default, sliders fill all available horizontal space. Use layout extensions to constrain width:

// Full width (default)
v.Slider(50)

// Fixed width
v.Slider(50).FixedWidth(30)

// Proportional width in HStack
h.Slider(50).Fill()

Theming

Customize the slider appearance using theme elements:

var theme = Hex1bTheme.Create()
    .Set(SliderTheme.TrackCharacter, '═')
    .Set(SliderTheme.HandleCharacter, '●')
    .Set(SliderTheme.HandleForegroundColor, Hex1bColor.Cyan)
    .Set(SliderTheme.FocusedHandleForegroundColor, Hex1bColor.Yellow)
    .Set(SliderTheme.FocusedHandleBackgroundColor, Hex1bColor.Blue);

await using var terminal = Hex1bTerminal.CreateBuilder()
    .WithHex1bApp((app, options) =>
    {
        options.Theme = theme;
        return ctx => /* ... */;
    })
    .Build();

await terminal.RunAsync();

Available Theme Elements

Element	Type	Default	Description
TrackCharacter	char	─	Character for the track line
HandleCharacter	char	█	Character for the handle/knob
TrackForegroundColor	Hex1bColor	Default	Track line color
TrackBackgroundColor	Hex1bColor	Default	Track background
HandleForegroundColor	Hex1bColor	Default	Handle color when unfocused
HandleBackgroundColor	Hex1bColor	Default	Handle background when unfocused
FocusedHandleForegroundColor	Hex1bColor	Black	Handle color when focused
FocusedHandleBackgroundColor	Hex1bColor	White	Handle background when focused

Focus Behavior

The slider visually indicates its focus state through the handle color:

State	Handle Appearance
Unfocused	Default track color
Focused	Highlighted (white background by default)

Use Tab and Shift+Tab to navigate focus between sliders and other focusable widgets.

Related Widgets

• ProgressWidget - For display-only progress indication
• ToggleSwitchWidget - For discrete option selection
• TextBoxWidget - For numeric text input
• StackWidgets - For laying out sliders with labels