Spaces:
Running
Running
File size: 1,342 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import { Range as RangeBase, getTrackBackground } from "react-range";
export const Range = ({
value,
step = 1,
min = 0,
max = 100,
onChange,
}: {
value: number;
step?: number;
min?: number;
max?: number;
onChange: (e: number) => void;
}) => {
return (
<div className="w-full">
<RangeBase
step={step}
min={min}
max={max}
values={[value]}
onChange={([value]) => onChange(value)}
renderTrack={({ props, children }) => (
<div
{...props}
style={{
...props.style,
height: "6px",
width: "100%",
borderRadius: 100,
backgroundColor: "#4F545C",
background: getTrackBackground({
values: [value],
colors: ["#5765F2", "#4F545C"],
min: min,
max: max,
}),
}}
>
{children}
</div>
)}
renderThumb={({ props }) => (
<div
{...props}
style={{
...props.style,
height: 16,
width: 6,
borderRadius: 2,
outline: "none",
backgroundColor: "white",
}}
/>
)}
/>
</div>
);
};
|