Components
Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.
npx @21st-dev/cli add reshaped/reshaped-sliderLoading preview...
import { Reshaped, View } from "reshaped/bundle";
import Slider from "@/components/ui/reshaped-slider";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ maxWidth: 400, width: "100%", margin: "0 auto", padding: 24 }}>
<View paddingBlock={4}>
<Slider
name="slider"
defaultValue={50}
renderValue={(args) => `$${args.value}`}
/>
</View>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...