-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
50 lines (45 loc) · 1.31 KB
/
index.tsx
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
import React from 'react';
import Slider from 'rc-slider';
export const appSliderDataTestIds = {
base: 'app-slider__base',
};
interface SliderProps {
min?: number;
max?: number;
step?: number;
onValueChanged: (position: number) => void;
}
const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged }: SliderProps): JSX.Element => {
return (
<div className="flex w-full h-[56px] justify-center items-center" data-test-id={appSliderDataTestIds.base}>
<Slider
trackStyle={{
background: 'rgba(255, 255, 255, 1)',
height: '2px',
borderRadius: '12px',
}}
railStyle={{
height: '2px',
background: 'rgba(255, 255, 255, 0.18)',
borderRadius: '12px',
}}
handleStyle={{
width: '28px',
height: '28px',
background: 'white',
marginTop: '-12px',
opacity: 1,
borderRadius: '100px',
border: '0.5px solid rgba(0, 0, 0, 0.04)',
boxShadow:
'0px 3px 1px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.16), 0px 3px 8px 0px rgba(0, 0, 0, 0.15)',
}}
min={min}
max={max}
step={step}
onChange={(value) => onValueChanged(value as number)}
/>
</div>
);
};
export default AppSlider;