---
sidebar_position: 2
---

import Paper from "@site/src/components/paper";
import RangeSlider, {
  RangeSliderCounter,
} from "@site/src/components/range-slider";

# Rc Slider

A slider component enables user to pick any value from a range.

<div className="mb-16" />

## Installation

<hr />

1.  Install the **rc-slider** package.

<div className="mb-4" />

```bash
npm i rc-slider
```

<div className="mb-4" />

2. Create a range component, **components/range-slider.tsx**

<div className="mb-4" />

```ts
import React from "react";
import Slider from "rc-slider";
import type { SliderProps } from "rc-slider";
import { cn } from "rizzui";
import "rc-slider/assets/index.css";

const rangeStyles = {
  base: "[&>.rc-slider-rail]:bg-muted [&>.rc-slider-handle]:opacity-100 [&>.rc-slider-handle-dragging]:!shadow-none [&>.rc-slider-handle-dragging]:ring-4",
  size: {
    sm: "[&>.rc-slider-rail]:h-0.5 [&>.rc-slider-track]:h-0.5 [&>.rc-slider-handle]:h-3 [&>.rc-slider-handle]:w-3 [&>.rc-slider-handle]:border-[3px]",
    md: "[&>.rc-slider-rail]:h-1 [&>.rc-slider-track]:h-1 [&>.rc-slider-handle]:h-4 [&>.rc-slider-handle]:w-4 [&>.rc-slider-handle]:border-4 [&>.rc-slider-handle]:-mt-1.5",
    lg: "[&>.rc-slider-rail]:h-2 [&>.rc-slider-track]:h-2 [&>.rc-slider-handle]:h-5 [&>.rc-slider-handle]:w-5 [&>.rc-slider-handle]:border-[5px] [&>.rc-slider-handle]:-mt-1.5",
    xl: "[&>.rc-slider-rail]:h-3 [&>.rc-slider-track]:h-3 [&>.rc-slider-handle]:h-6 [&>.rc-slider-handle]:w-6 [&>.rc-slider-handle]:border-[6px] [&>.rc-slider-handle]:-mt-1.5",
  },
  color: {
    primary:
      "[&>.rc-slider-track]:bg-primary [&>.rc-slider-handle]:border-primary-dark [&>.rc-slider-handle]:hover:border-primary-dark [&>.rc-slider-handle-dragging]:!border-primary-dark [&>.rc-slider-handle-dragging]:ring-primary/40 [&>.rc-slider-step>.rc-slider-dot-active]:border-primary-dark",
    secondary:
      "[&>.rc-slider-track]:bg-secondary [&>.rc-slider-handle]:border-secondary-dark [&>.rc-slider-handle]:hover:border-secondary-dark [&>.rc-slider-handle-dragging]:!border-secondary-dark [&>.rc-slider-handle-dragging]:ring-secondary/40 [&>.rc-slider-step>.rc-slider-dot-active]:border-secondary-dark",
    danger:
      "[&>.rc-slider-track]:bg-red [&>.rc-slider-handle]:border-red-dark [&>.rc-slider-handle]:hover:border-red-dark [&>.rc-slider-handle-dragging]:!border-red-dark [&>.rc-slider-handle-dragging]:ring-red/40 [&>.rc-slider-step>.rc-slider-dot-active]:border-red-dark",
  },
};

export interface RangeSliderProps extends SliderProps {
  size?: keyof typeof rangeStyles.size;
  color?: keyof typeof rangeStyles.color;
}

export default function RangeSlider({
  size = "md",
  color = "primary",
  className,
  ...props
}: RangeSliderProps) {
  return (
    <Slider
      className={cn(
        rangeStyles.base,
        rangeStyles.size[size],
        rangeStyles.color[color],
        className
      )}
      {...props}
    />
  );
}

RangeSlider.displayName = "RangeSlider";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **RangeSlider** component.

<Paper>
  <RangeSlider defaultValue={20} />
</Paper>

```jsx
import { RangeSlider } from "rizzui";

export default function App() {
  return <RangeSlider defaultValue={20} />;
}
```

<div className="mb-16" />

## Sizes

You can change the size of **RangeSlider** using [**size**](#rangeslider-sizes) property.

<Paper className="gap-6">
  <RangeSlider size="sm" defaultValue={20} />
  <RangeSlider defaultValue={25} />
  <RangeSlider size="lg" defaultValue={30} />
  <RangeSlider size="xl" defaultValue={35} />
</Paper>

```jsx
import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <>
      <RangeSlider size="sm" defaultValue={20} />
      <RangeSlider defaultValue={25} />
      <RangeSlider size="lg" defaultValue={30} />
      <RangeSlider size="xl" defaultValue={35} />
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of **RangeSlider** using [**color**](#rangeslider-colors) property.

<Paper className="gap-6">
  <RangeSlider defaultValue={15} />
  <RangeSlider defaultValue={25} color="secondary" />
  <RangeSlider defaultValue={30} color="danger" />
</Paper>

```jsx
import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <>
      <RangeSlider defaultValue={15} />
      <RangeSlider defaultValue={25} color="secondary" />
      <RangeSlider defaultValue={30} color="danger" />
    </>
  );
}
```

<div className="mb-16" />

## With Range

When **range** is true, display as dual thumb mode.

<Paper>
  <RangeSlider defaultValue={[20, 60]} range />
</Paper>

```jsx
import { RangeSlider } from "rizzui";

export default function App() {
  return <RangeSlider defaultValue={[20, 60]} range />;
}
```

<div className="mb-16" />

## With Marks & Steps

You can set multiple marks and steps using **marks** & **step** property.

<Paper>
  <RangeSlider
    marks={{
      0: "0",
      20: "2000",
      40: "4000",
      60: "6000",
      80: "8000",
      100: "10000",
    }}
    step={20}
    defaultValue={40}
  />
</Paper>

```jsx
import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <RangeSlider
      marks={{
        0: "0",
        20: "2000",
        40: "4000",
        60: "6000",
        80: "8000",
        100: "10000",
      }}
      step={20}
      defaultValue={40}
    />
  );
}
```

<div className="mb-16" />

## With Marks & Steps in Range

Make multiple marks and steps with range using **marks**, **step**, & **range** property.

<Paper>
  <RangeSlider
    range
    marks={{
      0: "0",
      20: "2000",
      40: "4000",
      60: "6000",
      80: "8000",
      100: "10000",
    }}
    step={20}
    defaultValue={[20, 60]}
  />
</Paper>

```jsx
import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <RangeSlider
      range
      marks={{
        0: "0",
        20: "2000",
        40: "4000",
        60: "6000",
        80: "8000",
        100: "10000",
      }}
      step={20}
      defaultValue={[20, 60]}
    />
  );
}
```

<div className="mb-16" />

## With Range Counter

Customize your range slider according to your preference.

<Paper className="block">
  <RangeSliderCounter />
</Paper>

```jsx
import React from 'react';
import { RangeSlider, cn } from 'rizzui';

export default function App() {
	const [state, setState] = React.useState({
		min: 200,
		max: 600,
	});

	function handleRangeChange(value: any) {
		setState({
			min: value[0],
			max: value[1],
		});
	}
	function handleMaxChange(max: number) {
		setState({
			...state,
			max: max || state.min,
		});
	}
	function handleMinChange(min: number) {
		setState({
			...state,
			min: min || 0,
		});
	}

	return (
		<div>
			<RangeSlider
				range
				min={0}
				max={1000}
				value={[state.min, state.max]}
				onChange={(value: any) => handleRangeChange(value)}
				className={cn('[&>.rc-slider-step]:hidden')}
			/>
			<div className="mt-5 grid grid-cols-2 items-center justify-between gap-5 text-sm font-bold">
				<div className="overflow-hidden rounded-lg border py-2">
					<p className="px-3 pt-1 text-gray-400">Min</p>
					<input
						type="number"
						value={state.min}
						onChange={(e) => handleMinChange(parseInt(e.target.value))}
						className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
						min={0}
						max={state.max}
						readOnly
					/>
				</div>
				<div className="overflow-hidden rounded-lg border py-2">
					<p className="px-3 pt-1 text-gray-400">Max</p>
					<input
						type="number"
						value={state.max}
						onChange={(e) => handleMaxChange(parseInt(e.target.value))}
						className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
						min={state.min}
						readOnly
					/>
				</div>
			</div>
		</div>
	);
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### RangeSlider Props

Here is the API documentation of the RangeSlider component.

<div className="overflow-x-auto">

|              Props              |                           Type                            |         Description         |   Default   |
| :-----------------------------: | :-------------------------------------------------------: | :-------------------------: | :---------: |
|          defaultValue           |                    `number` `number[]`                    |                             |    \_\_     |
|              size               |          [RangesliderSizes](#rangeslider-sizes)           | Sizes of the component are: |   `"md"`    |
|              color              |         [Rangeslidercolors](#rangeslider-colors)          |     Change slider color     | `"primary"` |
|            prefixCls            |                         `string`                          |                             |    \_\_     |
|            className            |                         `string`                          |                             |    \_\_     |
|              style              |                      `CSSProperties`                      |                             |    \_\_     |
|            disabled             |                         `boolean`                         |                             |    \_\_     |
|            keyboard             |                         `boolean`                         |                             |    \_\_     |
|            autoFocus            |                         `boolean`                         |                             |    \_\_     |
|             onFocus             |   `((e: FocusEvent<HTMLDivElement, Element>) => void)`    |                             |    \_\_     |
|             onBlur              |   `((e: FocusEvent<HTMLDivElement, Element>) => void)`    |                             |    \_\_     |
|              range              |                         `boolean`                         |                             |    \_\_     |
|              count              |                         `boolean`                         |                             |    \_\_     |
|               min               |                         `number`                          |                             |    \_\_     |
|               max               |                         `number`                          |                             |    \_\_     |
|              step               |                      `number` `null`                      |                             |    \_\_     |
|              value              |                    `number` `number[]`                    |                             |    \_\_     |
|            onChange             |       [RangeSliderOnchange](#range-slider-onchange)       |                             |    \_\_     |
|         onBeforeChange          | [RangeSliderOnbeforechange](#range-slider-onbeforechange) |                             |    \_\_     |
|          onAfterChange          |  [RangeSliderOnafterchange](#range-slider-onafterchange)  |                             |    \_\_     |
|           allowCross            |                         `boolean`                         |                             |    \_\_     |
|            pushable             |                    `number` `boolean`                     |                             |    \_\_     |
|         draggableTrack          |                         `boolean`                         |         range only          |    \_\_     |
|             reverse             |                         `boolean`                         |                             |    \_\_     |
|            vertical             |                         `boolean`                         |                             |    \_\_     |
|            included             |                         `boolean`                         |                             |    \_\_     |
|           startPoint            |                         `number`                          |                             |    \_\_     |
|           trackStyle            |             `CSSProperties` `CSSProperties[]`             |                             |    \_\_     |
|           handleStyle           |             `CSSProperties` `CSSProperties[]`             |                             |    \_\_     |
|            railStyle            |                      `CSSProperties`                      |                             |    \_\_     |
|            dotStyle             |  `CSSProperties` `((dotValue: number) => CSSProperties)`  |                             |    \_\_     |
|         activeDotStyle          |  `CSSProperties` `((dotValue: number) => CSSProperties)`  |                             |    \_\_     |
|              marks              |          [RangeSliderMarks](#range-slider-marks)          |                             |    \_\_     |
|              dots               |                         `boolean`                         |                             |    \_\_     |
|          handleRender           |  [RangeSliderHandleRender](#range-slider-handle-render)   |                             |    \_\_     |
|            tabIndex             |                    `number` `number[]`                    |                             |    \_\_     |
|       ariaLabelForHandle        |                    `string` `string[]`                    |                             |    \_\_     |
|     ariaLabelledByForHandle     |                    `string` `string[]`                    |                             |    \_\_     |
| ariaValueTextFormatterForHandle |           `AriaValueFormat` `AriaValueFormat[]`           |                             |    \_\_     |

</div>

- **Note:** You can check [**rc-slider documentation**](https://slider-react-component.vercel.app/) for more details.

<div className="mb-10" />

### Rangeslider Sizes

```tsx
type RangesliderSize = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Rangeslider Colors

```ts
type Rangeslidercolors =
  | "primary"
  | "secondary"
  | "danger"
  | "info"
  | "success"
  | "warning";
```

<div className="mb-10" />

### Range Slider onChange

```ts
type RangeSliderOnchange = (value: number | number[]) => void;
```

<div className="mb-10" />

### Range Slider onBeforeChange

```ts
type RangeSliderOnbeforechange = (value: number | number[]) => void;
```

<div className="mb-10" />

### Range Slider onAfterChange

```ts
type RangeSliderOnafterchange = (value: number | number[]) => void;
```

<div className="mb-10" />

### Range Slider Marks

```ts
type RangeSliderMarks = Record<string | number, ReactNode | MarkObj>;
```

<div className="mb-10" />

### Range Slider Handle Render

```ts
type RangeSliderHandleRender = ((origin: ReactElement<HandleProps, string | JSXElementConstructor<any>>, props: RenderProps) => ReactElement<any, string | JSXElementConstructor<...>>);
```
