Slider

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

tsx

1
2
3<div className="w-full max-w-sm">
  <Slider value={50} label="Volume" />
</div>

Slider is a control for a numeric value within a range (volume, opacity, price). Drag the knob or click the track to set the value. The range is fixed: 0 to 100, in steps of 1.

Installation

Terminal

$ bext ui add slider

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

slider.tsx

1
2
3<div className="w-full max-w-sm">
  <Slider value={50} label="Volume" />
</div>

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
5import { Slider } from "@bext-stack/ui/primitives"

<div className="w-full max-w-sm">
  <Slider value={50} label="Volume" />
</div>

Anatomy

<Slider value={50} label="Volume" />

API Reference

Slider

Prop	Type	Default	Description
value	number	50	Initial position, from 0 to 100. Values outside the range are clamped.
label	string	"Value"	aria-label of the thumb.
className	string	—	Extra classes on the root, for example a width.

Data Attributes

Attributes you can target in custom CSS to override the style for each state.

Attribute	On	Values	Description
data-ui="slider"	root	—	The island handles mouse and touch dragging and the keyboard.
data-value	root	0..100	Current value, rounded. Read it from your own script to use the value.
data-ui="slider-range"	filled part of the track	—	Its width follows the value.
data-ui="slider-thumb"	thumb	—	Focusable element with role="slider"; aria-valuenow follows the value.

Keyboard

Key	Action
`Arrow Right / Arrow Up`	Increase by 1 (by 10 with Shift).
`Arrow Left / Arrow Down`	Decrease by 1 (by 10 with Shift).
`Page Up / Page Down`	Increase / decrease by 10.
`Home / End`	Go to 0 / 100.

Accessibility

The thumb sets role="slider", aria-orientation="horizontal", aria-valuemin="0", aria-valuemax="100" and aria-valuenow, which the island updates as the value changes. It is focusable (tabindex="0"). Its accessible name is the label prop: set it, because the default is the generic "Value".

The slider renders no form field: read data-value on the root from your own script if you need to submit it.

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