JAVASCRIPT

react algolia range slider

import React from "react";
import { connectRange } from "react-instantsearch-dom";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";

const RangeSlider = ({ min, max, currentRefinement, refine }) => {
  const onChange = (values) => {
    refine({ min: values[0], max: values[1] });
  };

  return (
    <div>
      <p className="text-gray-200 pb-4">
        Price from ({currentRefinement.min}) to ({currentRefinement.max})ETH
      </p>
      <Slider
        range
        min={min}
        max={max}
        step={0.01}
        value={[currentRefinement.min, currentRefinement.max]}
        allowCross={false}
        railStyle={{ background: "#e6e6e6", height: "5px" }}
        trackStyle={{ background: "#1BAFBF", height: "5px" }}
        onChange={onChange}
      />
    </div>
  );
};

export default connectRange(RangeSlider);