Sliders

Example

With Number

Usage

		<Slider bind:value min={0} max={100} />

<!-- With Number -->
<SliderNumber bind:value />

API Reference

Slider

A control for selecting a numeric value within a range. Built on top of the bits-ui Slider primitive.

Property Type Description

value $bindable

number[]

The current value of the slider. Array with one element for single, multiple for range sliders. Default: —

type

enum

Whether the slider has a single thumb or multiple thumbs. Default: 'single'

min

number

The minimum value of the slider. Default: 0

max

number

The maximum value of the slider. Default: 100

step

union

The step increment. Can be a single number or an array of specific step values. Default: —

orientation

enum

The orientation of the slider. Default: 'horizontal'

disabled

boolean

Whether the slider is disabled. Default: false

onValueChange

function

A callback invoked when the slider value changes during interaction. Default: —

onValueCommit

function

A callback invoked when the user finishes interacting with the slider (on pointerup/keyup). Default: —

dir

enum

The reading direction of the slider. Default: 'ltr'

autoSort

boolean

Whether to automatically sort the values when multiple thumbs cross over. Default: true

tabindex

number

The tabindex of the slider thumbs. Default: —

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLElement

The underlying DOM element. Default: —

Property

value

type

min

max

step

orientation

disabled

onValueChange

onValueCommit

dir

autoSort

tabindex

class

ref