React Color Shade Slider
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/@uiw/react-color-shade-slider)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-shade-slider/file/README.md)
ShadeSlider Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color).
[](https://uiwjs.github.io/react-color/#/shade-slider)
## Install
```bash
npm i @uiw/react-color-shade-slider
```
## Usage
```jsx mdx:preview
import React, { useState } from 'react';
import ShadeSlider from '@uiw/react-color-shade-slider';
export default function Demo() {
const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
return (
{
setHsva({ ...hsva, ...newShade });
}}
/>
);
}
```
## Props
```ts
import React from 'react';
import { AlphaProps } from '@uiw/react-color-alpha';
export interface ShadeSliderProps extends Omit {
onChange?: (newShade: {
v: number;
}) => void;
}
declare const ShadeSlider: React.ForwardRefExoticComponent>;
export default ShadeSlider;
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
