Report an issue

Slider

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

	<script lang="ts">
  import { Slider } from "bits-ui";
  import { cn } from "$lib/utils/styles.js";
 
  let value = [20, 80];
</script>
 
<div class="w-full md:max-w-[280px]">
  <Slider.Root
    bind:value
    class="relative flex w-full touch-none select-none items-center"
  >
    {#snippet children({ thumbs, ticks })}
      <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 index}
        <Slider.Thumb
          {index}
          class={cn(
            "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:shadow-card",
            index === 0 ? "bg-blue-400" : "bg-yellow-300"
          )}
        />
      {/each}
      {#each ticks as index}
        <Slider.Tick {index} class="block h-1 w-1 rounded-full bg-dark-10" />
      {/each}
    {/snippet}
  </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 bindable prop
number[]

The current value of the slider.

Default: []
onValueChange
function

A callback function called when the value state of the slider changes.

Default: undefined
onValueChangeEnd
function

A callback function called when the user finishes dragging the thumb and the value changes. This is different than the onValueChange callback because it waits until the user stops dragging before calling the callback, where the onValueChange callback is called immediately after the user starts dragging.

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 app.

Default: ltr
autoSort
boolean

Whether to automatically sort the values in the array when moving thumbs past one another.

Default: true
child
Snippet

Use render delegation to render your own element. See render delegation for more information.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
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
child
Snippet

Use render delegation to render your own element. See render delegation for more information.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
Data Attribute Value Description
data-slider-range
——

Present on the range elements.

Slider.Thumb

A thumb on the slider.

Property Type Description
index Required
number

The index of the thumb in the array of thumbs provided by the thumbs children snippet prop.

Default: undefined
disabled
boolean

Whether or not the thumb is disabled.

Default: false
child
Snippet

Use render delegation to render your own element. See render delegation for more information.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
Data Attribute Value Description
data-slider-thumb
——

Present on the thumb elements.

Slider.Tick

A tick mark on the slider.

Property Type Description
index Required
number

The index of the tick in the array of ticks provided by the ticks children snippet prop.

Default: undefined
child
Snippet

Use render delegation to render your own element. See render delegation for more information.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
Data Attribute Value Description
data-bounded
——

Present when the tick is bounded.

data-slider-tick
——

Present on the tick elements.