Slider

requires layer

A component that allows the user to select a value between a minimum and max value.

Properties

Color, AppearanceOverride

Use the Color and AppearanceOverride properties to style the component.

Available colors are amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc.

The theme data for the component can be found in the Theming section and can be overwritten through AppearanceOverride.

Pass Color as a string and AppearanceOverride as an optionalColorTable. More information on overrides can be found here.

Tailwind Color

default

Code block has not loaded. An error may have occurred.

TooltipAppearanceOverride

Type

Code block has not loaded. An error may have occurred.

Disabled

Type

Code block has not loaded. An error may have occurred.

BarHeight

Defaults to 0, 8.

Type

Code block has not loaded. An error may have occurred.

HandleSize

Defaults to 0, 16, 0, 16.

Type

Code block has not loaded. An error may have occurred.

Width

Type

Code block has not loaded. An error may have occurred.

Value

One-way Value

Type

Code block has not loaded. An error may have occurred.

Min

Type

Code block has not loaded. An error may have occurred.

Max

Type

Code block has not loaded. An error may have occurred.

Step

Type

Code block has not loaded. An error may have occurred.

VisualizeSteps

Type

Code block has not loaded. An error may have occurred.

Tooltip

Type

Code block has not loaded. An error may have occurred.

TooltipPlacement

Type

Code block has not loaded. An error may have occurred.

InterceptChange

Before the value is set, this function is called with the new value. The returned value is used as the new value. If there is no return value, the old value is used. This can be used to clamp the value dynamically.

Type

Code block has not loaded. An error may have occurred.

OnValueChange

Type

Code block has not loaded. An error may have occurred.

OnDrag

state is whether the handle is being dragged. value is the current value.

Type

Code block has not loaded. An error may have occurred.

Slots

Slots allow you to customize specific aspects of the component completely, often replacing the old instances. Slots are passed parameters that allow the slot to interact with component data that is normally not exposed. Generally, an useColor (the function passed by theme:get()) function is passed as first parameter to allow the new components to use the same color as the parent component. When using slots, make sure to wrap any code that uses reactive values in a Computed (or any other classes that isolate state), to prevent unnecessary updates.

Handle

The second parameter is a reactive value that is the percentage of the handle, which will be between 0 and 1.

Function Type

Code block has not loaded. An error may have occurred.

Tooltip

Replaces the content of the tooltip. Second parameter is the current slider value.

Function Type

Code block has not loaded. An error may have occurred.

BarBase

The base, non-highlighted part of the bar.

Function Type

Code block has not loaded. An error may have occurred.

BarFill

The highlighted part of the bar. The second parameter is the percentage of the bar that is filled.

Function Type

Code block has not loaded. An error may have occurred.

Theming

States

State	Description
Base
Hover

Colors

Color	Description
Background
Highlight
Handle
Step