# Sliders

## Example

```svelte
<script lang="ts">
	import { Slider, SliderNumber } from '@foxui/all';

	let value = $state(50);

	let value2 = $state(42);
</script>

<Slider bind:value type="single" />

<h3>With Number</h3>

<SliderNumber bind:value={value2} type="single" max={50} min={10} />
```

## Documentation

## Usage

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

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

## Sources

This component uses the bits-ui component: Slider, see here for the documentation for that: https://bits-ui.com/docs/components/slider/llms.txt

## API Reference

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `number[]` | `-` | The current value of the slider. Array with one element for single, multiple for range sliders. (bindable) |
| type | `'single' | 'multiple'` | `'single'` | Whether the slider has a single thumb or multiple thumbs. |
| min | `number` | `0` | The minimum value of the slider. |
| max | `number` | `100` | The maximum value of the slider. |
| step | `number | number[]` | `-` | The step increment. Can be a single number or an array of specific step values. |
| orientation | `'horizontal' | 'vertical'` | `'horizontal'` | The orientation of the slider. |
| disabled | `boolean` | `false` | Whether the slider is disabled. |
| onValueChange | `(value: number[]) => void` | `-` | A callback invoked when the slider value changes during interaction. |
| onValueCommit | `(value: number[]) => void` | `-` | A callback invoked when the user finishes interacting with the slider (on pointerup/keyup). |
| dir | `'ltr' | 'rtl'` | `'ltr'` | The reading direction of the slider. |
| autoSort | `boolean` | `true` | Whether to automatically sort the values when multiple thumbs cross over. |
| tabindex | `number` | `-` | The tabindex of the slider thumbs. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |