51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface SliderProps {
|
|
value: number[];
|
|
onValueChange: (value: number[]) => void;
|
|
min: number;
|
|
max: number;
|
|
step: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function Slider({ value, onValueChange, min, max, step, className }: SliderProps) {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onValueChange([parseInt(e.target.value)]);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("relative flex w-full items-center", className)}>
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value[0]}
|
|
onChange={handleChange}
|
|
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider-thumb"
|
|
/>
|
|
<style jsx>{`
|
|
.slider-thumb::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
cursor: pointer;
|
|
}
|
|
.slider-thumb::-moz-range-thumb {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|