react-multi-input-rangeslider

react-multi-input-rangeslider is a highly customizable and easy-to-use React component that allows users to select a range of values within a specified minimum and maximum range. This component is particularly useful for applications that require a user to specify price ranges, filter ranges, or any other numeric range input. It is built with TypeScript and designed to be flexible and easy to integrate into any React application.

Features

Customizable width, track and range colors
Supports minimum and maximum values
Built with TypeScript

Installation

You can install react-multi-input-rangeslider using npm or yarn:

npm install react-multi-input-rangeslider
OR
yarn add react-multi-input-rangeslider

Usage

Here's an example of how you can use react-multi-input-rangeslider in your React application:

import React, { useState } from "react";
import MultiInputSlider from "react-multi-input-rangeslider";
import "react-multi-input-rangeslider/style/style.css"

const App = () => {
  const [price, setPrice] = useState<{ minPrice: number; maxPrice: number }>({
    minPrice: 0,
    maxPrice: 0,
  });

  return (
    <MultiInputSlider
      min={0}
      max={1000}
      onChange={({ min, max }) => setPrice({ minPrice: min, maxPrice: max })}
    />
  );
};

export default App;

Props

Property	Type	Default Value	Description
`width`	string	300px	Specifies the width for the the input slider.
`min`	number	0	Specifies the lowest value in the range of permitted values. Its value must be less than that of `max`.
`max`	number	100	Specifies the greatest value in the range of permitted values. Its value must be greater than that of `min`.
`disabled`	boolean	false	Specifies whether the range slider element is disabled or not.
`onChange`	function	NOOP	Specifies a function to be called when the slide event is triggered for any of the thumbs.
`rangeColor`	string	color	Specifies the color for the range.
`trackColor`	string	color	Specifies the color for the track.
`valueStyle`	style	{{display:"flex" , justifyContent:"center" , alignItems:"center" , paddingTop:"10p" , gap:"8px"}}	Specifies the style for the the display values.
`currencyText`	string	$,€,Rs. and more	Specifies the style for the the display values.