Reshaped Slider

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Slider to your project and fits it to your theme.

import { Reshaped, View } from "reshaped/bundle";
import Slider from "@/components/ui/reshaped-slider";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <View height="200px">
          <Slider name="slider" defaultMaxValue={60} orientation="vertical" />
        </View>
      </div>
    </Reshaped>
  );
}