Slider

Allows users to select a value from a continuous range by sliding a handle.

	<script lang="ts">
  import { Slider } from "bits-ui";
 
  let value = [50];
</script>
 
<div class="w-full md:max-w-[280px]">
  <Slider.Root
    bind:value
    let:thumbs
    class="relative flex w-full touch-none select-none items-center"
  >
    <span
      class="relative h-2 w-full grow overflow-hidden rounded-full bg-dark-10"
    >
      <Slider.Range class="absolute h-full bg-foreground" />
    </span>
    {#each thumbs as thumb}
      <Slider.Thumb
        {thumb}
        class="block size-[25px] cursor-pointer rounded-full border border-border-input bg-background shadow  transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50 dark:bg-foreground dark:shadow-card"
      />
    {/each}
  </Slider.Root>
</div>

Structure

	<script lang="ts">
	import { Slider } from "bits-ui";
</script>
 
<Slider.Root>
	<Slider.Range />
	<Slider.Thumb />
	<Slider.Input />
</Slider.Root>

Examples

Multiple Thumbs and Ticks

If the value prop has more than one value, the slider will render multiple thumbs. You can also use the ticks slot prop to render ticks at specific intervals.

	<script lang="ts">
	import { Slider } from "bits-ui";
 
	let value = [5, 7];
</script>
 
<Slider.Root min={0} max={10} step={1} bind:value let:ticks let:thumbs>
	<Slider.Range />
 
	{#each thumbs as thumb}
		<Slider.Thumb {thumb} />
	{/each}
 
	{#each ticks as tick}
		<Slider.Tick {tick} />
	{/each}
</Slider.Root>

Vertical Orientation

You can use the orientation prop to change the orientation of the slider, which defaults to "horizontal".

	<Slider.Root let:thumbs orientation="vertical">
	<Slider.Range />
 
	{#each thumbs as thumb}
		<Slider.Thumb {thumb} />
	{/each}
</Slider.Root>

RTL Support

You can use the dir prop to change the reading direction of the slider, which defaults to "ltr".

	<Slider.Root let:thumbs dir="rtl">
	<Slider.Range />
 
	{#each thumbs as thumb}
		<Slider.Thumb {thumb} />
	{/each}
</Slider.Root>

API Reference

Slider.Root

The root slider component which contains the remaining slider components.

Property	Type	Description
`value`	`number[]`	The current value of the slider. `Default: []`
`onValueChange`	`function`	A callback function called when the value state of the slider changes. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the switch is disabled. `Default: false`
`max`	`number`	The maximum value of the slider. `Default: 100`
`min`	`number`	The minimum value of the slider. `Default: 0`
`orientation`	`enum`	The orientation of the slider. `Default: "horizontal"`
`step`	`number`	The step value of the slider. `Default: 1`
`dir`	`enum`	The reading direction of the slider. If set to 'rtl', the slider will be reversed for both `'horizontal'` and `'vertical'` orientations. `Default: "ltr"`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`ticks`	`Tick[]`	The tick builders to pass to the individual `Slider.Tick` components.
`thumbs`	`Thumb[]`	The thumb builders to pass to the individual `Slider.Thumb` components.
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-orientation`	`enum`	The orientation of the slider.
`data-slider-root`	`——`	Present on the root element.

Slider.Range

The range of the slider.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-slider-range`	`——`	Present on the range elements.

Slider.Thumb

A thumb on the slider.

Property	Type	Description
`thumb`	`Thumb`	An individual thumb builder from the `thumbs` slot prop provided by the `Slider.Root` component. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-slider-thumb`	`——`	Present on the thumb elements.

Slider.Tick

A tick mark on the slider.

Property	Type	Description
`tick`	`Tick`	An individual tick builder from the `ticks` slot prop provided by the `Slider.Root` component. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-bounded`	`——`	Present when the tick is bounded.
`data-slider-tick`	`——`	Present on the tick elements.