How to: Dual range slider in React with Framer Motion

1<div>
2  // The are the inputs that will capture the values of the slider.
3  <input
4    type="hidden"
5    name={'price-min'}
6    value={(max / (trackWidthInPx / knobX)).toFixed(0)}
7  />
8  <input
9    type="hidden"
10    name={'price-max'}
11    value={(max / (trackWidthInPx / knobXSecond)).toFixed(0)}
12  />
13  // A title or label
14  <p
15    style={{
16      textAlign: 'left',
17      fontWeight: 'bold',
18      margin: '.5rem 0',
19    }}
20  >
21    {label}
22  </p>
23  // These are small amount labels that show the selected value of both thumbs.
24  <AmountLabels>
25    <small
26      style={{
27        marginBottom: '0.25rem',
28        marginRight: '0.25rem',
29      }}
30    >
31      {/* If knobX isnt 0 or lower we set the textvalue on the track */}
32      {knobX > 0
33        ? Math.ceil(
34            parseInt((max / (trackWidthInPx / knobX)).toFixed(0), 10) / 5
35          ) * 5
36        : t('filters.priceRange.noMin')}
37    </small>
38    {'-'}
39    <small
40      style={{
41        marginLeft: '0.25rem',
42        marginBottom: '0.25rem',
43      }}
44    >
45      {/* We set the text value for knobXSecond */}
46      {Math.ceil(
47        parseInt((max / (trackWidthInPx / knobXSecond)).toFixed(0), 10) / 5
48      ) * 5}
49    </small>
50  </AmountLabels>
51  // This is the "rail/track" where the thumbs will slide on.
52  <motion.div css={Track} ref={constraintsRef}>
53    // The first thumb (or knob)
54    <motion.div
55      css={Knob}
56      drag="x"
57      initial={{
58        x: knobX,
59      }}
60      dragMomentum={false}
61      // When you stop dragging we update the AmountLabel value
62      onDragEnd={() => {
63        const minPrice = Number(getValueOfKnob(knobX));
64        setSliderMin(minPrice);
65      }}
66      // While you're dragging we update the knobX state
67      onDrag={(event, info) => {
68        // Check if the point where you slide is bigger than second knob...
69        // knobSeparatorLength is a magic value for 2rem size of the knobs. This will influence the bounds of the knobs
70        const newValue =
71          info.point.x > knobXSecond - knobSeparatorLength
72            ? knobXSecond - knobSeparatorLength
73            : info.point.x;
74        //Math.ceil(N / 5) * 5; rounds to nearest 5
75        updateKnobX(newValue < 0 ? 0 : Math.ceil(newValue / 5) * 5);
76      }}
77      // Cant be dragged further than...
78      dragConstraints={{
79        left: 0,
80        right: knobXSecond - knobSeparatorLength,
81      }}
82    />
83    // The second thumb (or knob)
84    <motion.div
85      css={Knob}
86      drag="x"
87      initial={{
88        x: knobXSecond,
89      }}
90      dragMomentum={false}
91      onDragEnd={() => {
92        const maxPrice = Number(getValueOfKnob(knobXSecond));
93        setSliderMax(maxPrice);
94      }}
95      onDrag={(event, info) => {
96        // Check if the point where you slide isn't smaller than first knob and not bigger than bounds...
97        const newValue =
98          info.point.x > trackWidthInPx
99            ? trackWidthInPx
100            : info.point.x < knobX + knobSeparatorLength
101            ? knobX + knobSeparatorLength
102            : info.point.x;
103        updateKnobXSecond(Math.ceil(newValue / 5) * 5);
104      }}
105      dragConstraints={{
106        left: knobX + knobSeparatorLength,
107        right: trackWidthInPx,
108      }}
109    />
110  </motion.div>
111</div>

1const Knob = styled.div`
2  ${({ knobSize }: any) => css`
3width: ${knobSize}rem;
4height: ${knobSize}rem;
5border-radius: 50%;
6background-color: white;
7top: calc(-50% - 0.5rem);
8position: absolute;
9box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
10cursor: pointer;
11
12&:nth-of-type(2) {
13  left: -2rem;
14`}
15`;
16
17// withComponent is from EmotionCSS to use a styled.div with a Framer Motion motion.div
18const AnimatedKnob = Knob.withComponent(motion.div);
19
20const Track = styled(motion.div)`
21  ${({ trackWidth, knobX, knobXSecond, trackWidthInPx }: any) => css`
22    width: ${trackWidth}rem;
23    height: 0.5rem;
24    background-color: #3d5ef8;
25    /* This gradient contains a calculation for the slider track. */
26    background: linear-gradient(
27      to right,
28      #dae3f4 0%,
29      #dae3f4 ${Number((100 * (knobX / trackWidthInPx)).toFixed(2))}%,
30      #3d5ef8 ${Number(100 * (knobX / trackWidthInPx) + 8).toFixed(2)}%,
31      #3d5ef8 ${Number((100 * (knobXSecond / trackWidthInPx)).toFixed(2)) -
32        8 -
33        0.01}%,
34      #dae3f4 ${Number(100 * (knobXSecond / trackWidthInPx)).toFixed(2)}%
35    );
36    border-radius: 0.25rem;
37    position: relative;
38    margin: 1rem 0 2rem;
39  `}
40`;
41
42const Row = styled.div`
43  display: flex;
44  align-items: baseline;
45  margin: 1rem 0 1.5rem;
46  position: relative;
47`;
48
49const AmountLabels = styled.div`
50  font-size: 0.875rem;
51  background-color: ${theme.colors.greyTags};
52  border-radius: 0.5rem;
53  padding: 0.5rem;
54  display: inline-block;
55  margin-bottom: 0.5rem;
56`;

1// SliderParent.tsx
2const SliderParentComponent = () => {
3  const [sliderMin, setSliderMin] = useState(personalDetails.minBudget);
4  const [sliderMax, setSliderMax] = useState(personalDetails.maxBudget);
5
6  return (
7    <Slider
8      defaultMinBudget={personalDetails.minBudget}
9      defaultMaxBudget={personalDetails.maxBudget}
10      label={t('common:Core.whatIsYourMonthlyBudget')}
11      max={4000}
12      t={t}
13      setSliderMin={setSliderMin}
14      setSliderMax={setSliderMax}
15    />
16  );
17};
18
19//Slider.tsx
20// STYLING COMPONENTS HERE
21
22interface Props {
23  max: number; //ex. 4000
24  defaultMinValue?: number; // If there is a value already, we use this as placeholder
25  defaultMaxValue?: number;
26  t: TFunction; // Our translation library for multi language (next18next)
27  label?: string; //Text value of the label
28  setSliderMin: (value: number) => void; // This is a state
29  setSliderMax: (value: number) => void;
30}
31
32export const Slider: React.FC<Props> = props => {
33  const {
34    label,
35    max,
36    t,
37    setSliderMin,
38    setSliderMax,
39    defaultMinValue,
40    defaultMaxValue,
41  } = props;
42  // We use trackLength to increase the length of the slider.
43  const trackLength = 10;
44  // `trackWidth` is the final width of the slider.
45  const trackWidth = 1.5 * trackLength;
46  // We use `rem` as our size values so we need to multiple the width by 16 (1rem = 16px)
47  const trackWidthInPx = trackWidth * 16; //192
48  // This is a scale to increase the size of the Knobs/Thumbs
49  const knobSize = 2;
50  const knobSizeInPx = knobSize * 16;
51  // This is the amount of range we want to keep between two thumbs/knobs to avoid them stacking
52  const knobSeparatorLength = knobSizeInPx * 2.25;
53
54  // max is a number value (ex. 4000)
55  function getPixelValue(knob) {
56    return (knob / max) * trackWidthInPx;
57  }
58
59  // We calculate the value of the knob on the track. We like to increment in steps of 5
60  function getValueOfKnob(knob) {
61    const value: number = parseInt(
62      (max / (trackWidthInPx / knob)).toFixed(0),
63      10
64    );
65    return Math.ceil(value / 5) * 5;
66  }
67
68  // This is the first knobs value and position on the track.
69  const [knobX, updateKnobX] = useState(
70    defaultMinValue ? getPixelValue(defaultMinValue) : 0
71  );
72  const [knobXSecond, updateKnobXSecond] = useState(
73    defaultMaxValue ? getPixelValue(defaultMaxValue) : trackWidthInPx
74  );
75  // A constraintsRef to use set on the track and disallow the knobs to move further than the knob
76  const constraintsRef = useRef(null);
77
78  // HTML/MARKUP HERE
79};