Slider

A draggable control for selecting values from a continuous range.

<script lang="ts">
import { Slider } from "coss-svelte";
</script>

<Slider value={50} />

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Slider, SliderRange, SliderThumb, SliderThumbLabel, SliderTick, SliderTickLabel } from "coss-svelte";

Anatomy

Slider
SliderRange
SliderThumb
SliderThumbLabel
SliderTick
SliderTickLabel

API Reference

Slider

A draggable control for selecting values from a continuous range.

Signatures

{ type?: "single"; value?: number; onValueChange?: OnChangeFn<number>; onValueCommit?: OnChangeFn<number> }{ type: "multiple"; value?: number[]; onValueChange?: OnChangeFn<number[]>; onValueCommit?: OnChangeFn<number[]> }

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Behavior, selection, or HTML type passed to the underlying control.
`bind:value`	`number \| number[]`	`""`	Current value for the component. Bind with `bind:value` when supported.
`min`	`number`	`0`	Minimum value for the control.
`max`	`number`	`100`	Maximum value for the control.
`step`	`number \| number[]`	`1`	Increment used when changing slider values.