Breaking News: Grepper is joining You.com. Read the official announcement!

react algolia range slider

Kazim answered on June 1, 2022 Popularity 10/10 Helpfulness 3/10

answer react algolia range slider

react algolia range slider

Comment

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);

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: algolia javascript range slider

Link to this answer
Share Copy Link

Contributed on Jun 01 2022

Kazim

0 Answers Avg Quality 2/10

react algolia range slider

Contents

More Related Answers

react algolia range slider

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.