React Range

https://github.com/tajo/react-range
Admin
A lightweight, unstyled range slider component for React that supports single and multiple thumbs...
Tokens:2,545
Snippets:48
Trust Score:8.9
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Spin up development environment

Source: https://github.com/tajo/react-range/blob/main/README.md

Commands to clone the repository, install dependencies, and start the development server.

```bash
git clone https://github.com/tajo/react-range
cd react-range
pnpm install
pnpm ladle serve
```

--------------------------------

### Installation

Source: https://github.com/tajo/react-range/blob/main/README.md

Install the react-range package using pnpm.

```bash
pnpm add react-range
```

--------------------------------

### Native HTML range input example

Source: https://github.com/tajo/react-range/blob/main/README.md

An example of a native HTML range input element.

```html
<input type="range" />
```

--------------------------------

### Run end-to-end tests in dev mode

Source: https://github.com/tajo/react-range/blob/main/README.md

Commands to start the ladle server and run end-to-end tests in development mode.

```bash
pnpm ladle serve
pnpm test:e2e:dev
```

--------------------------------

### Super Simple Usage

Source: https://github.com/tajo/react-range/blob/main/README.md

A basic example of using the Range component with minimal configuration.

```jsx
import * as React from "react";
import { Range } from "react-range";

const SuperSimple: React.FC = () => {
  const [values, setValues] = React.useState([50]);
  return (
    <Range
      label="Select your value"
      step={0.1}
      min={0}
      max={100}
      values={values}
      onChange={(values) => setValues(values)}
      renderTrack={({ props, children }) => (
        <div
          {...props}
          style={{ ...props.style,
            height: "6px",
            width: "100%",
            backgroundColor: "#ccc",
          }}
        >
          {children}
        </div>
      )}
      renderThumb={({ props }) => (
        <div
          {...props}
          key={props.key}
          style={{ ...props.style,
            height: "42px",
            width: "42px",
            backgroundColor: "#999",
          }}
        />
      )}
    />
  );
};

```

--------------------------------

### Run end-to-end tests in CI mode

Source: https://github.com/tajo/react-range/blob/main/README.md

Command to run end-to-end tests in CI mode (headless).

```bash
pnpm test:e2e
```

--------------------------------

### renderMark Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

An optional prop to render an element at each step of the range. The function receives parameters for props and index, and should return a React component.

```typescript
renderMark?: (params: {
  props: {
    key: string;
    style: React.CSSProperties;
    ref: React.RefObject<any>;
  };
  index: number;
}) => React.ReactNode;
```

--------------------------------

### step Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

The minimal distance between two values. Can be a decimal. Defaults to 1.

```typescript
step: number;
```

--------------------------------

### min Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

The minimum value of the range. Can be a decimal or negative. Defaults to 0.

```typescript
min: number;
```

--------------------------------

### rtl Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

If true, optimizes the slider for RTL (Right-to-Left) layouts. Defaults to false.

```typescript
rtl: boolean;
```

--------------------------------

### onChange Prop

Source: https://github.com/tajo/react-range/blob/main/README.md

A callback function that is called when a thumb is moved, providing the new array of values.

```typescript
onChange: (values: number[]) => void;
```

--------------------------------

### onFinalChange Prop

Source: https://github.com/tajo/react-range/blob/main/README.md

A callback function that is called when a change is finished (e.g., mouse/touch up, keyup), providing the current array of values. Useful for actions like AJAX requests.

```typescript
onFinalChange: (values: number[]) => void;
```

--------------------------------

### disabled Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

If true, ignores all touch and mouse events and makes the component not focusable. Defaults to false.

```typescript
disabled: boolean;
```

--------------------------------

### values Prop

Source: https://github.com/tajo/react-range/blob/main/README.md

An array of numbers that controls the position of the thumbs on the track. The length of the array determines the number of thumbs.

```typescript
values: number[];
```

--------------------------------

### allowOverlap Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

Determines if thumbs should be allowed to overlap when there are multiple thumbs on a single track. Defaults to false.

```typescript
allowOverlap: boolean;
```

--------------------------------

### Color array length requirement

Source: https://github.com/tajo/react-range/blob/main/README.md

An explanation of the requirement that the number of colors must be one more than the number of values for getTrackBackground.

```javascript
values.length + 1 === colors.length;
```

--------------------------------

### max Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

The maximum value of the range. Can be a decimal or negative. Defaults to 100.

```typescript
max: number;
```

--------------------------------

### draggableTrack Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

Determines if all thumbs can be dragged at once when there are multiple thumbs on a single track. Defaults to false.

```typescript
draggableTrack: boolean;
```

--------------------------------

### getTrackBackground function signature

Source: https://github.com/tajo/react-range/blob/main/README.md

The signature for the getTrackBackground helper function, which generates a linear-gradient string for track styling.

```typescript
getTrackBackground: (params: {
  min: number;
  max: number;
  values: number[];
  colors: string[];
  direction?: Direction;
  rtl?: boolean;
}) => string;
```

--------------------------------

### renderTrack Prop

Source: https://github.com/tajo/react-range/blob/main/README.md

Defines the track (root) element of the range slider. The function receives parameters for props, children, drag status, and disabled status, and should return a React component.

```typescript
renderTrack: (params: {
  props: {
    style: React.CSSProperties;
    ref: React.RefObject<any>;
    onMouseDown: (e: React.MouseEvent) => void;
    onTouchStart: (e: React.TouchEvent) => void;
  };
  children: React.ReactNode;
  isDragged: boolean;
  disabled: boolean;
}) => React.ReactNode;
```

--------------------------------

### renderThumb Prop

Source: https://github.com/tajo/react-range/blob/main/README.md

Defines the thumb element of the range slider. The function receives parameters for props, value, index, and drag status, and should return a React component.

```typescript
renderThumb: (params: {
  props: {
    key: number;
    style: React.CSSProperties;
    tabIndex?: number;
    "aria-valuemax": number;
    "aria-valuemin": number;
    "aria-valuenow": number;
    draggable: boolean;
    role: string;
    onKeyDown: (e: React.KeyboardEvent) => void;
    onKeyUp: (e: React.KeyboardEvent) => void;
  };
  value: number;
  index: number;
  isDragged: boolean;
}) => React.ReactNode;
```

--------------------------------

### direction Prop (Optional)

Source: https://github.com/tajo/react-range/blob/main/README.md

Sets the orientation (vertical/horizontal) and the direction of value increase. Uses the Direction enum.

```typescript
direction: Direction;

enum Direction {
  Right = "to right",
  Left = "to left",
  Down = "to bottom",
  Up = "to top",
}
```

--------------------------------

### Direction Enum

Source: https://github.com/tajo/react-range/blob/main/README.md

Enum for defining the direction of the range slider.

```javascript
import { Direction } from "react-range";
```
Tokens:
Raw