About
A React hook that manages the state and logic for a slider component with corresponding input fields. Provides validation, range constraints, and synchronized updates between slider and input values. Features - Synchronized slider and input field values - Input validation and number formatting - Range constraints for min/max values - Support for single value or range (two handles) - Reset functionality to default values
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds useSliderWithInput to your project and fits it to your theme.
Code
How useSliderWithInput is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Slider } from "@/components/ui/slider";
import { Input } from "@/components/ui/input";
import { useSliderWithInput } from "@/hooks/use-slider-with-input";
import { Button } from "@/components/ui/button";
function SliderWithInputDemo() {
const {
sliderValue,
inputValues,
validateAndUpdateValue,
handleInputChange,
handleSliderChange,
resetToDefault,
} = useSliderWithInput({
minValue: 0,
maxValue: 1000,
initialValue: [200, 800],
defaultValue: [200, 800],
});
return (
<div className="w-full max-w-sm space-y-4">
<div className="space-y-2">
<Slider
value={sliderValue}
min={0}
max={1000}
step={1}
onValueChange={handleSliderChange}
className="py-4"
/>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2">
<Input
type="text"
value={inputValues[0]}
onChange={(e) => handleInputChange(e, 0)}
onBlur={() => validateAndUpdateValue(inputValues[0], 0)}
className="w-24"
/>
<span className="text-muted-foreground">to</span>
<Input
type="text"
value={inputValues[1]}
onChange={(e) => handleInputChange(e, 1)}
onBlur={() => validateAndUpdateValue(inputValues[1], 1)}
className="w-24"
/>
</div>
<div className="flex-1" />
<Button variant="outline" onClick={resetToDefault}>
Reset
</Button>
</div>
</div>
</div>
);
}
export { SliderWithInputDemo };
More by Origin UI
View all
Dialog
1.2K
Avatar
951
useImageUpload
926
usePagination
622
Popover
384
Button
362
Command
321
Accordion
257