48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
import "rc-slider/assets/index.css";
|
||
|
|
import Slider from "rc-slider";
|
||
|
|
import { useSoundContext } from "../../context/SoundContext";
|
||
|
|
|
||
|
|
const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
|
||
|
|
const { dispatch, state } = useSoundContext();
|
||
|
|
const volume = soundCategory === "SIGHTINGVOLUME" ? state.sightingVolume : state.NPEDsoundVolume;
|
||
|
|
|
||
|
|
const handleChange = (value: number | number[]) => {
|
||
|
|
const number = typeof value === "number" ? value : value[0];
|
||
|
|
dispatch({ type: soundCategory, payload: number });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-row w-full lg:w-[40%] space-x-5">
|
||
|
|
<Slider
|
||
|
|
min={0}
|
||
|
|
max={1}
|
||
|
|
onChange={handleChange}
|
||
|
|
value={volume}
|
||
|
|
step={0.1}
|
||
|
|
styles={{
|
||
|
|
handle: {
|
||
|
|
width: "1.2rem",
|
||
|
|
height: "1.2rem",
|
||
|
|
marginTop: -7,
|
||
|
|
backgroundColor: "#3b82f6",
|
||
|
|
border: "2px solid white",
|
||
|
|
borderRadius: "50%",
|
||
|
|
boxShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
|
||
|
|
},
|
||
|
|
track: {
|
||
|
|
backgroundColor: "#3b82f6",
|
||
|
|
height: 6,
|
||
|
|
},
|
||
|
|
rail: {
|
||
|
|
backgroundColor: "#e5e7eb",
|
||
|
|
height: 6,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<span>{volume * 10}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SliderComponent;
|