form Slider.tsx

0% Statements 0/24

0% Branches 0/30

0% Functions 0/11

0% Lines 0/23

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 101 102 103 104 105 106 107 108

import React, { FC, useContext } from "react";
import styled, { css, ThemeContext } from "styled-components";
import { Range, getTrackBackground } from "react-range";
 
interface SliderProps {
  value: number;
  min: number;
  max: number;
  step?: number;
  labelledBy?: string;
  onChange?: (value: number) => void;
}
 
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};
        `
      : ""}
`;
 
const clampAndSnap = (
  value: number,
  min: number,
  max: number,
  step: number,
) => {
  const clamped = Math.min(Math.max(value, min), max);
  const snapped = Math.round((clamped - min) / step) * step + min;
  return Number(snapped.toFixed(10));
};
 
export const Slider: FC<SliderProps> = ({
  labelledBy,
  value,
  min,
  max,
  step,
  onChange,
}) => {
  const themeContext = useContext(ThemeContext);
 
  const safeValue = clampAndSnap(value ?? 0, min, max, step ?? 1);
 
  return (
    <Range
      labelledBy={labelledBy}
      min={min}
      max={max}
      step={step}
      values={[safeValue]}
      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} />
      )}
    />
  );
};