@saidaitdriss/multirangeslider

multiRangeSlider

Installation

npm i @saidaitdriss/multirangeslider

usage

import

import MultiRangeSlider from "@saidaitdriss/multirangeslider";

set up

<MultiRangeSlider
        min={0}
        max={100}
        onChange={(min, max) => {
            console.log("min : ",min)
            console.log("max : ",max)
        }}
        leftValue={29}
        rightValue={100}
        currency={"€"}
      />

min : the minimum value of the range max : the maximum value of the range onChange : method to execute when the value of min or max changed leftValue : the left value of the range rightValue : the right value of the range currency : the symbol of the price

Other options

Name	description	default
containerStyle	the style of the container	{

      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      paddingBottom: "14px",
      paddingTop: "14px",
      width: "300px",
    }|

|rangeStyle| the style of the range| { backgroundColor: "red" }| |valuesStyle|the style of left and right values | { color: "red", fontSize: "12px" }|