Slider

Sliders let users make selections from a continuous or discrete range of values. Built on bits-ui's Slider.Root in single-thumb mode, with a floating value bubble and optional leading/trailing icons and tick stops.

M3 Spec

open_in_new

Overview

The Slider component implements the Material Design 3 Slider pattern, including the M3-specific gapped track (a visible break between the active fill and the handle).

Set a numeric step and stops to render discrete tick marks; leave step="any" for continuous dragging.

Import

import { Slider } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Open the Slider story with Controls for size, step, and stops.

Basic Usage

Bind value to read and set the position:

<script lang="ts">
  import { Slider } from '@noxlovette/material';

  let volume = $state(40);
</script>

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

Slider Props

Prop	Type	Default	Description
`value` required	`number`	`—`	The current value. Bindable.
`min`	`number`	`0`	The minimum value.
`max`	`number`	`100`	The maximum value.
`step`	`number \| 'any'`	`'any'`	Step increment. A number enables discrete dragging/stop rendering; "any" is continuous.
`disabled`	`boolean`	`false`	Disables the slider.
`showValue`	`boolean`	`true`	Shows the floating value bubble above the handle on hover/focus/drag.
`size`	`"xs" \| "s" \| "m" \| "l" \| "xl"`	`"xs"`	Controls track thickness, handle height, and whether leading/trailing icons render at a visible size.
`leadingIconProps`	`IconProps`	`—`	Props for an icon anchored at the track start (only rendered at size m/l/xl).
`trailingIconProps`	`IconProps`	`—`	Props for an icon anchored at the track end (only rendered at size m/l/xl).
`stops`	`boolean`	`false`	Shows tick marks at each discrete step (requires a numeric step).
`endStops`	`boolean`	`true`	Shows a tick mark at the track end regardless of stops.
`vertical`	`boolean`	`false`	Renders the slider in vertical orientation.
`format`	`(value: number) => string`	`(n) => n.toFixed(0)`	Formats the value shown in the floating value bubble.

Accessibility

keyboard

Keyboard support

Arrow keys nudge by one step, Home/End jump to min/max — all handled by bits-ui Slider.Root.

visibility

Focus ring

The handle draws a visible outline on keyboard focus, distinct from hover/drag states.

chat_bubble

Value bubble

showValue surfaces the numeric value visually on hover/focus/drag; format() lets you localize or add units.