Range

requires layer

A slider component that allows the user to select a range of values.

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

index can be either 1 or 2 and value is the new value for the handle at that index.

Type

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

OnDrag

state is whether the handle is being dragged. values contains 2 values, which are the current values of the handles.

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

Will be called twice, once for each 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 a table containing each handle's 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 percentages that both handles are at. The range between these percentages should be highlighted.

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