npm package: @licuido-ui/ui_slider
Description: Sliders allow users to make selections from a range of values.
Latest version: 0.0.2

# Slider

Sliders allow users to make selections from a range of values.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link to 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_slider
```

## Import component

```jsx
import { Slider } from '@licuido-ui/ui_slider';
```

## Usage

```jsx
<Slider value={40} thumbColor={'#665CD7'} size={12} />
```

## Image

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

## Sample Code

```jsx
<Slider
  value={20}
  step={10}
  size={'medium'}
  sliderHeight={10}
  disableSwap={true}
  disabled={false}
  customMarks={true}
  progressLabel={true}
  valueLabelDisplay={'off'}
  labelColor={'green'}
  labelSize={18}
  sliderColor={'green'}
  thumbColor={''}
  onChange={() => false}
  sliderStyles={{}}
  symbol={'%'}
  labelStyle={{}}
  sliderThumbStyle={{}}
  marks={[]}
/>
```

## Props

| **Name**              | **Description** | **Default**                                                                                                | **Control** |
| --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
| **id**                | string          | string                                                                                                     | string      |
| **value**             | number          | 20                                                                                                         | 20          |
| **step**              | number          | 5                                                                                                          | 5           |
| **size**              | "small"         | "medium"                                                                                                   | "large"     | small |
| **sliderHeight**      | number          | 12                                                                                                         | 12          |
| **disabled**          | boolean         | False                                                                                                      | False       |
| **disableSwap**       | boolean         | False                                                                                                      | False       |
| **customMarks**       | boolean         | False                                                                                                      | False       |
| **progressLabel**     | boolean         | False                                                                                                      | False       |
| **valueLabelDisplay** | "off"           | "on"                                                                                                       | off         |
| **labelColor**        | string          | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));                                                   | -           |
| **labelSize**         | number          | 16                                                                                                         | 16          |
| **sliderColor**       | string          | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));                                                   | -           |
| **thumbColor**        | string          | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));                                                   | -           |
| **onChange**          | ()=&gt;{}       | -                                                                                                          | -           |
| **sliderStyles**      | object          | sliderStyles : {}                                                                                          | {}          |
| **symbol**            | char "$","%"    | %                                                                                                          | %           |
| **labelStyle**        | object          | labelStyle : {}                                                                                            | {}          |
| **containerStyle**    | object          | containerStyle : {}                                                                                        | {}          |
| **sliderThumbStyle**  | object          | sliderThumbStyle : {}                                                                                      | {}          |
| **marks**             | Array of object | marks : [0 : {...} 2 keys1 : {...} 2 keys2 : {...} 2 keys3 : {...} 2 keys4 : {...} 2 keys5 : {...} 2 keys] |             |
| **sliderStyles**      | object          | sliderStyles : {}                                                                                          | {}          |
| **symbol**            | char "$","%",.. | %                                                                                                          | %           |
| **labelStyle**        | object          | labelStyle : {}                                                                                            | {}          |
| **containerStyle**    | object          | containerStyle : {}                                                                                        | {}          |
| **sliderThumbStyle**  | object          | sliderThumbStyle : {}                                                                                      | {}          |