Axie UI
Component

Slider

A native range input for compact numeric preferences and settings.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install
pnpm add axie-ui

Import

code
import "axie-ui/styles.css";import { Slider } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry
pnpm dlx shadcn@latest add https://axie.alexi.life/r/slider.json

Copied source import

code
import "@/styles/axie.css";import { Slider } from "@/components/axie/slider";

Prefer @axie/slider? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code
import { Slider } from "axie-ui";export function Example() {  return (    <Slider      defaultValue={68}      label="Monthly pace"      max={100}      valueLabel={(value) => `${value}%`}    />  );}

Accessibility

  • Expose a visible label and a text value for the current setting.
  • Use sensible min, max, and step values for keyboard control.
  • Avoid sliders for exact values when a number input would be faster.

API Reference

PropTypeDefaultDescription
labelReactNode-Optional label rendered above the range input.
valueLabelReactNode | (value: string) => ReactNode-Optional value label aligned to the right. Pass a function to render the live range value.
...propsInputHTMLAttributes<HTMLInputElement>-Native range props.