npm package: @licuido-ui/ui_range-slider
Description: RangeSlider can be used to set the start and end of a range by supplying an array of values to the value prop.
Latest version: 0.0.2

# 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](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_range-slide
```

## Import component

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

## Usage

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

## Image

![alt text](./rangeSlider.png)

## Sample Code

```jsx
<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**   | \(\)=&gt;\{\}                           | \-          | -                                                            |
| **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&lt;\{\}&gt;                     | \{ \}       | sliderStyle : \{\}                                           |
| **maxLabelStyle**     | SxProps&lt;\{\}&gt;                     | \{ \}       | maxLabelStyle : \{\}                                         |
| **minLabelStyle**     | SxProps&lt;\{\}&gt;                     | \{ \}       | minLabelStyle : \{\}                                         |
| **containerStyle**    | SxProps&lt;\{\}&gt;                     | \{ \}       | containerStyle : \{\}                                        |
| **sliderThumbStyle**  | SxProps&lt;\{\}&gt;                     | \{ \}       | sliderThumbStyle : \{\}                                      |
| **marks**             | \{ value: number; label: string; \}\[\] | \[\]        | []                                                           |
| **className**         | string                                  | \-          | Set string                                                   |
| **sx**                | SxProps&lt;Theme&gt;                    | \-          | 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                                                   |