Slider

An input where the user selects a value from within a given range.

tsx

<Slider name="volume" value={50} min={0} max={100} step={1} />

Slider — curseur pour valeur numérique dans un range (volume, opacité, prix). Drag du knob ou clic sur la piste pour définir la valeur.

Installation

Terminal

$ bext ui add slider

Copy and paste the following into src/components/ui/slider.tsx.

slider.tsx

<Slider name="volume" value={50} min={0} max={100} step={1} />

This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="slider" hooks.

Usage

tsx

1
2
3
4
5
6import { Slider, Label } from "@bext-stack/ui/primitives"

<div className="w-full max-w-sm">
  <Label className="mb-2">Volume: 50</Label>
  <Slider name="volume" value={50} min={0} max={100} />
</div>

Anatomy

<Slider name value min max step />

API Reference

Slider

Prop	Type	Default	Description
name	string	—	Nom form.
value	number	0	undefined
min	number	0	undefined
max	number	100	undefined
step	number	1	undefined
disabled	boolean	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="slider"	root	—	L'island gère le drag mouse/touch.

Keyboard

Key	Action
`Arrow keys`	Incrémenter/décrémenter par step.
`Home / End`	Aller au min / max.

Accessibility

Devrait porter role="slider" aria-valuemin aria-valuemax aria-valuenow aria-orientation.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A slider picks a numeric value from a range. An <input type=range>
// writes a `value` signal on input; only the readout text node updates.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Slider</h1>
      <p style="color:#64748b;margin-top:0">An input for selecting a value from a range (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A slider lets you pick a numeric value from a range. The bound value
// is held in a "use client" island (an <input type=range>).
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Slider</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>An input for selecting a value from a range.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Skeleton Sonner →

On This Page