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" }|