50
type Props = { rangeValue: number setRangeValue: React.Dispatch<React.SetStateAction<number>> min: number max: number}
const styling = ` input.rangeSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border: 3px solid black; border-radius: 50%; cursor: pointer; background: #fff; }
.dark input.rangeSlider::-webkit-slider-thumb { border: 3px solid white; background: black; }`
export default function RangeSlider({ rangeValue, setRangeValue, min, max,}: Props) { return ( <> <style>{styling}</style> <div className="w-full"> <label htmlFor="range-slider" className="sr-only"> Default range </label> <input id="range-slider" type="range" min={min} max={max} value={rangeValue} onChange={(e) => setRangeValue(+e.target.value)} className="rangeSlider h-2 w-full cursor-pointer appearance-none rounded-lg border-2 border-border dark:border-darkBorder bg-white dark:bg-darkBg" /> </div> </> )}
import { useState } from 'react'
import RangeSlider from '@/components/RangeSlider'
const [rangeValue, setRangeValue] = useState(50)
<div className="w-full"> <RangeSlider max={100} min={0} rangeValue={rangeValue} setRangeValue={setRangeValue} /> <div className="mt-3 text-center"> <p className="font-bold">{rangeValue}</p> </div></div>
xd