@licuido-ui/ui_range-slider NPM

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 henry@crayond.co

Link

Story Book Link Range Slider

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_range-slide

Import component

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

Usage

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

Image

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.2

8 months ago