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 [email protected]

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

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 |