Slider

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

	<script lang="ts">
  import { Slider } from "$lib";
 
  let value = [50];
</script>
 
<div class="w-full md:max-w-[280px]">
  <Slider.Root
    bind:value
    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>
    <Slider.Thumb
      class="block rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] 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"
    />
  </Slider.Root>
</div>

	<script lang="ts">
  import { Slider } from "$lib";
 
  let value = [50];
</script>
 
<div class="w-full md:max-w-[280px]">
  <Slider.Root
    bind:value
    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>
    <Slider.Thumb
      class="block rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] 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"
    />
  </Slider.Root>
</div>

Structure

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

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

Component API

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
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`ticks`	`number`	The number of ticks to display on the slider.

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

🚧 UNDER CONSTRUCTION 🚧