@saidaitdriss/multirangeslider NPM

multiRangeSlider

blue red

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