61 lines
1.6 KiB
TypeScript
61 lines
1.6 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 getVolumeOption = (soundCategory: string) => {
|
|
if (soundCategory === "SIGHTINGVOLUME") {
|
|
return state.sightingVolume;
|
|
}
|
|
if (soundCategory === "NPEDVOLUME") {
|
|
return state.NPEDsoundVolume;
|
|
}
|
|
if (soundCategory === "HOTLISTVOLUME") {
|
|
return state.hotlistSoundVolume;
|
|
}
|
|
};
|
|
|
|
const volume = getVolumeOption(soundCategory);
|
|
|
|
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 ? volume * 10 : 1}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SliderComponent;
|