Cyberpunk Slider Native range with value display and an optional square-to-diamond thumb.
Forms range tuning
Native range input with progress and value display. The diamond variant has a slim track and a solid square thumb that rotates while held; both variants retain native keyboard controls.
Usage Native range with value display and an optional square-to-diamond thumb.
<CyberpunkSlider
variant="diamond"
label="Volume"
value={volume}
onChange={(event) => setVolume(Number(event.target.value))}
/>Files components/steez/CyberpunkSlider.tsxcomponent
components/steez/CyberpunkSlider.module.cssstyle
components/hooks/useStableId.tsfile
Install package pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/uiimport { CyberpunkSlider } from "@steez-ui/ui";
Install from registry pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/cyberpunk-slider.jsonSource files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.
import { CyberpunkSlider } from "<project-root>/components/steez/CyberpunkSlider";Replace <project-root> with a relative path from your file.
Copy standalone file /copy/steez/cyberpunk-slider.tsxLoading…
Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.
Open standalone source