# Slider

Source: https://lumeo.nativ.sh/components/slider

# Slider

An input where the user selects a value from within a given range.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Slider />

## When to Use

-   Select a value from a continuous or stepped numeric range
-   Control volume, brightness, or opacity with a drag interaction
-   Filter products by price range using a dual-thumb range slider
-   Set thresholds, limits, or budgets visually
-   Provide an intuitive alternative to numeric text inputs for bounded values

Preview Code

Default

Value: 50

Preview Code

Custom Range

Value: 500 / 1000

Preview Code

Step Values

Value: 5

Preview Code

Disabled

Preview Code

Volume Control Example

Volume: 75%

Preview Code

Range Slider

 

Range: 25 — 75

Preview Code

With Tooltip

Hover over the slider to see the tooltip

Preview Code

With Marks

0

25

50

75

100

Value: 50

Preview Code

Custom Tooltip Format

Value: 65%

Preview Code

Vertical Orientation

## Keyboard Interactions

Key

Action

ArrowRight

Increase the value by one step

ArrowLeft

Decrease the value by one step

ArrowUp

Increase the value by one step (vertical orientation)

ArrowDown

Decrease the value by one step (vertical orientation)

Home

Set the value to the minimum

End

Set the value to the maximum

Tab

Move focus to the slider thumb or next focusable element

**Mobile (rc.49).** The slider now uses unified pointer events (mouse, touch, and stylus pen all fire the same handlers) so dragging the thumb works correctly on touchscreens without any extra configuration.

## API Reference

### Slider

Property

Type

Default

Description

Value

double

0

Current value of the slider. Use with @bind-Value for two-way binding.

ValueChanged

EventCallback<double>

—

Callback invoked when the value changes.

Min

double

0

Minimum value of the range.

Max

double

100

Maximum value of the range.

Step

double

1

Increment step size between values.

Disabled

bool

false

When true, prevents user interaction and dims the slider.

IsRange

bool

false

Enables dual-thumb range mode.

ValueEnd

double

75

End value for range slider. Use with @bind-ValueEnd for two-way binding.

ValueEndChanged

EventCallback<double>

—

Callback when end value changes.

Orientation

string

"Horizontal"

Orientation of the slider: "Horizontal" or "Vertical".

ShowTooltip

bool

false

Shows a tooltip with the current value on hover.

Marks

List<double>?

null

Custom mark positions to display along the slider track.

ShowTicks

bool

false

Shows tick marks at each mark position.

FormatTooltip

Func<double, string>?

null

Custom formatter for tooltip and mark labels.

Culture

CultureInfo?

null

Culture used for formatting tick labels and tooltips.

Required

bool

false

Marks the field as required. Syncs with a parent FormField.

Invalid

bool

false

Applies error styling. Syncs with a parent FormField.

ErrorText

string?

null

Error message displayed below the field when Invalid is true.

HelperText

string?

null

Helper text shown below the field when not invalid.

Label

string?

null

Label rendered above the field (standalone, without FormField).

Name

string?

null

HTML name attribute for form submission.

FormField

FormField.FormFieldContext?

null

Cascaded context from a parent FormField; wires label, validation, and required state automatically.

AriaLabel

string?

null

Accessible label announced by screen readers when no visible Label is set.

## Related Components

-   [Input](/components/input) — Use a numeric input when the user needs to type an exact value rather than drag
-   [Progress](/components/progress) — Use to display a read-only progress bar rather than an interactive slider