@licuido/ui_range-slider

RangeSlider

RangeSlider can be used to set the start and end of a range by supplying an array of values to the value prop.

Author

• @author Henry Dyson J [e-mail]

Link

Story Book Link Range Slider

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido/ui_range-slide

Import component

import { RangeSlider } from '@licuido/ui_range-slide';

Usage

<RangeSlider value={[20, 50]} thumbColor={'green'} step={5} />

Image

Sample Code

<RangeSlider
  value={[30, 70]}
  step={10}
  marks={[]}
  disabled={false}
  sliderColor={'green'}
  thumbColor={'green'}
  sliderHeight={8}
  customMarks={false}
  minMaxValues={true}
  valueLabelDisplay={'off'}
  handleChangeFun={() => false}
  sliderStyle={{}}
  maxLabelStyle={{}}
  minLabelStyle={{}}
  containerStyle={{}}
  sliderThumbStyle={{}}
  minMaxLabelColor={'#929292'}
  minMaxLabelSize={12}
  minMaxValueColor={'#262626'}
  minMaxValueSize={14}
  minLabel={'Min'}
  maxLabel={'Max'}
  markLabelColor={'#707070'}
  markLabelSize={12}
/>

Props

Name	Description	Default	Control
id	string	string	string
value	number[]	[20,30]	[20 ,30]
handleChangeFun	()=>{}	-	-
markLabelColor	string	"#707070"	linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))
markLabelSize	number	12	12
minLabel	string	"Min"	Min
maxLabel	string	"Max"	Max
sliderHeight	number	8	8
sliderColor	string	"#665CD7"	linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
thumbColor	string	"#665CD7"	linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
disabled	boolean	false	False or True
valueLabelDisplay	"off" or "on"	"off"	"off"
step	number	10	10
customMarks	boolean	false	False or True
minMaxValues	boolean	false	False or True
sliderStyle	SxProps<{}>	{ }	sliderStyle : {}
maxLabelStyle	SxProps<{}>	{ }	maxLabelStyle : {}
minLabelStyle	SxProps<{}>	{ }	minLabelStyle : {}
containerStyle	SxProps<{}>	{ }	containerStyle : {}
sliderThumbStyle	SxProps<{}>	{ }	sliderThumbStyle : {}
marks	{ value: number; label: string; }[]	[]	[]
className	string	-	Set string
sx	SxProps<Theme>	-	Set object
size	"small" or "medium" or "large"	small	small
minMaxLabelColor	string	"#929292"	linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
minMaxLabelSize	number	12	Set number
minMaxValueColor	string	"#262626"	linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
minMaxValueSize	number	14	Set number