form Slider.tsx

0% Statements 0/20
0% Branches 0/22
0% Functions 0/10
0% Lines 0/19
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { FC, useContext } from "react";
import styled, { css, ThemeContext } from "styled-components";
import { Range, getTrackBackground } from "react-range";
 
export interface SliderProps {
  value: number;
  min: number;
  max: number;
  step?: number;
  labelledBy?: string;
  onChange?: (value: number) => void;
}
 
export const SliderWrapper = styled.div`
  width: calc(100% - 20px);
  position: relative;
`;
 
const RangeInner = styled.div`
  display: flex;
  width: 100%;
  height: 28px;
`;
 
const RangeTrack = styled.div`
  width: 100%;
  height: 4px;
  border-radius: 4px;
  align-self: center;
  background: ${(props) => props.theme.colors.input.border};
`;
 
interface RangeThumbProps {
  $isDragged: boolean;
}
 
const RangeThumb = styled.div<RangeThumbProps>`
  height: 12px;
  width: 12px;
  border-radius: 12px;
  background: ${(props) => props.theme.colors.button.background};
  border: 1px solid ${(props) => props.theme.colors.input.border};
  ${(props) =>
    props.$isDragged
      ? css`
          background: ${(props) => props.theme.colors.highlight};
          border: 1px solid ${(props) => props.theme.colors.highlight};
        `
      : ""}
`;
 
export const Slider: FC<SliderProps> = ({
  labelledBy,
  value,
  min,
  max,
  step,
  onChange,
}) => {
  const themeContext = useContext(ThemeContext);
 
  return (
    <Range
      labelledBy={labelledBy}
      min={min}
      max={max}
      step={step}
      values={[value]}
      onChange={(values) => onChange?.(values[0])}
      renderTrack={({ props, children }) => (
        <RangeInner
          onMouseDown={props.onMouseDown}
          onTouchStart={props.onTouchStart}
          style={props.style}
        >
          <RangeTrack
            ref={props.ref}
            style={{
              background: getTrackBackground({
                values: [value],
                colors: [
                  themeContext?.colors.highlight ?? "black",
                  themeContext?.colors.input.border ?? "white",
                ],
                min,
                max,
              }),
            }}
          >
            {children}
          </RangeTrack>
        </RangeInner>
      )}
      renderThumb={({ props, isDragged }) => (
        <RangeThumb {...props} $isDragged={isDragged} style={props.style} />
      )}
    />
  );
};