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
|
import React from "react";
import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
import { PLAYBACK_SLOTS } from "./config";
// use workaround from: https://github.com/react-component/slider/issues/835#issuecomment-1201805736
const CustomSlider = RcSlider as React.ForwardRefExoticComponent<SliderProps<number> & React.RefAttributes<SliderRef>>;
interface GeshemSliderProps {
playback?: string,
slider: number,
setSlider: React.Dispatch<React.SetStateAction<number>>
}
export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
const handle = {
height: 40,
width: 40,
border: 0,
marginTop: -10,
boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
};
const rail = {
height: 20,
backgroundColor: "#3498db"
};
const track = {
display: "none"
};
const styles = {
handle, rail, track
}
return (
<div id="slider">
<CustomSlider
min={0}
max={playback ? PLAYBACK_SLOTS : 9}
defaultValue={slider}
styles={styles}
onChange={val => setSlider(val)}
/>
</div>
);
}
|
