### Project Setup and Execution

Source: https://github.com/tanstack/ranger/blob/main/examples/react/update-on-drag/README.md

Installs project dependencies using npm or yarn, and then starts the example application. This process requires Node.js and a package manager (npm or yarn) to be installed on your system.

```shell
npm install
npm run start
```

```shell
yarn install
yarn start
```

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

### Project Setup and Execution

Source: https://github.com/tanstack/ranger/blob/main/examples/react/custom-steps/README.md

Installs project dependencies using npm or yarn, and then starts the example application. This process requires Node.js and a package manager (npm or yarn) to be installed on your system.

```shell
npm install
npm run start
```

```shell
yarn install
yarn start
```

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

### Project Setup and Execution

Source: https://github.com/tanstack/ranger/blob/main/examples/react/basic/README.md

Installs project dependencies using npm or yarn, and then starts the example application. This process requires Node.js and a package manager (npm or yarn) to be installed on your system.

```shell
npm install
npm run start
```

```shell
yarn install
yarn start
```

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

### Project Setup and Execution

Source: https://github.com/tanstack/ranger/blob/main/examples/react/logarithmic-interpolator/README.md

Installs project dependencies using npm or yarn, and then starts the example application. This process requires Node.js and a package manager (npm or yarn) to be installed on your system.

```shell
npm install
npm run start
```

```shell
yarn install
yarn start
```

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

### Project Setup and Execution

Source: https://github.com/tanstack/ranger/blob/main/examples/react/custom-styles/README.md

Installs project dependencies using npm or yarn, and then starts the example application. This process requires Node.js and a package manager (npm or yarn) to be installed on your system.

```shell
npm install
npm run start
```

```shell
yarn install
yarn start
```

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

### Navigate and Run Example

Source: https://github.com/tanstack/ranger/blob/main/CONTRIBUTING.md

Navigates into a specific example directory within the monorepo and runs the example using pnpm. This allows testing individual components or features.

```shell
cd examples/react/basic
```

```shell
pnpm dev
```

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

### Install Project Dependencies with pnpm

Source: https://github.com/tanstack/ranger/blob/main/CONTRIBUTING.md

Installs all project dependencies for the monorepo using pnpm. This command automatically links local packages and examples, ensuring the workspace is set up correctly.

```shell
pnpm install
```

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

### Basic TanStack Ranger Usage with React

Source: https://github.com/tanstack/ranger/blob/main/docs/quick-start.md

Demonstrates the minimal setup for TanStack Ranger in a React application. It shows how to initialize `useRanger`, manage state for range values, and render interactive slider handles. Requires `@tanstack/react-ranger` and `react`.

```tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { useRanger, Ranger } from '@tanstack/react-ranger'

function App() {
  const rangerRef = React.useRef<HTMLDivElement>(null)
  const [values, setValues] = React.useState<ReadonlyArray<number>>([
    10, 15, 50,
  ])

  const rangerInstance = useRanger<HTMLDivElement>({
    getRangerElement: () => rangerRef.current,
    values,
    min: 0,
    max: 100,
    stepSize: 5,
    onChange: (instance: Ranger<HTMLDivElement>) =>
      setValues(instance.sortedValues),
  })

  return (
    <div className="App" style={{ padding: 10 }}>
      <h1>Basic Range</h1>
      <span>Active Index: {rangerInstance.activeHandleIndex}</span>
      <br />
      <br />
      <div
        ref={rangerRef}
        style={{
          position: 'relative',
          userSelect: 'none',
          height: '4px',
          background: '#ddd',
          boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
          borderRadius: '2px',
        }}
      >
        {rangerInstance
          .handles()
          .map(
            (
              { value,
                onKeyDownHandler,
                onMouseDownHandler,
                onTouchStart,
                isActive,
              },
              i,
            ) => (
              <button
                key={i}
                onKeyDown={onKeyDownHandler}
                onMouseDown={onMouseDownHandler}
                onTouchStart={onTouchStart}
                role="slider"
                aria-valuemin={rangerInstance.options.min}
                aria-valuemax={rangerInstance.options.max}
                aria-valuenow={value}
                style={{
                  position: 'absolute',
                  top: '50%',
                  left: `${rangerInstance.getPercentageForValue(value)}%`,
                  zIndex: isActive ? '1' : '0',
                  transform: 'translate(-50%, -50%)',
                  width: '14px',
                  height: '14px',
                  outline: 'none',
                  borderRadius: '100%',
                  background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
                  border: 'solid 1px #888',
                }}
              />
            ),
          )}
      </div>
      <br />
      <br />
      <br />
      <pre
        style={{
          display: 'inline-block',
          textAlign: 'left',
        }}
      >
        <code>
          {JSON.stringify({
            values,
          })}
        </code>
      </pre>
    </div>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
)

```

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

### Install TanStack Ranger

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/react-ranger.md

Installs the TanStack Ranger package using npm. This command is used to add the library to your project's dependencies.

```sh
npm install @tanstack/react-ranger
```

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

### Clone TanStack Ranger Repository

Source: https://github.com/tanstack/ranger/blob/main/CONTRIBUTING.md

Clones the official TanStack Ranger repository from GitHub using the GitHub CLI. This is the first step to get the project code onto your local machine.

```shell
gh repo clone TanStack/ranger
```

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

### Get Ticks API

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/custom-steps.md

Retrieves an array of tick objects to be rendered on the ranger. Each tick object includes its value, key, and percentage placement.

```tsx
getTicks: () => ReadonlyArray<{value: number; key: number; percentage: number}>
```

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

### Run Build or Dev Watcher with pnpm

Source: https://github.com/tanstack/ranger/blob/main/CONTRIBUTING.md

Executes the project build process or starts the development watcher using pnpm. The dev watcher automatically rebuilds code as changes are detected.

```shell
pnpm build
```

```shell
pnpm dev
```

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

### TanStack Ranger API

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/basic.md

Provides details on the configuration options and properties available for the TanStack Ranger component. This includes setting the range limits, current values, step size, and managing interactive handles.

```APIDOC
TanStack Ranger API:

Options:
  values: ReadonlyArray<number>
    Required. The current value (or values) for the range.
  min: number
    Required. The minimum limit for the range.
  max: number
    Required. The maximum limit for the range.
  stepSize: number
    Required. The distance between selectable steps.
  onChange: (instance: Ranger<TTrackElement>) => void
    A function that is called when the handle is released.

API Properties:
  handles: ReadonlyArray<{value: number; isActive: boolean; onKeyDownHandler(event): function; onMouseDownHandler(event): function; onTouchStart(event): function}>
    Handles to be rendered. Each `handle` has the following props:
     - `value: number` - The current value for the handle.
     - `isActive: boolean` - Denotes if the handle is currently being dragged.
     - `onKeyDownHandler(event): func`
     - `onMouseDownHandler(event): func`
     - `onTouchStart(event): func`
  activeHandleIndex: null | number
    The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.
```

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

### Interpolator Interface Definition

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/logarithmic-interpolator.md

Defines the `interpolator` interface required for custom interpolation functions in react-ranger. It includes methods for converting a value within a range to a percentage and transforming a clientX coordinate back into a value based on track dimensions and range.

```typescript
interpolator: {
    getPercentageForValue: (val: number, min: number, max: number): number;
    getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number;
}

- getPercentageForValue: Takes the value & range and returns a percentage [0, 100] where the value sits from left to right.
- getValueForClientX: Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value.
```

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

### Custom Styles API: getSegments

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/custom-styles.md

Describes the `getSegments` method for custom styling in the ranger component. This method returns an array of segment objects, each defining its position and width as percentages.

```APIDOC
getSegments: () => ReadonlyArray<{left: number; width: number}>
  - Segments to be rendered.
  - Each `segment` has the following props:
    - `left`: number - Percentage value of where segment should start on ranger
    - `width`: number - Percentage value of segment width
```

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

### TanStack Ranger `onDrag` API Option

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/update-on-drag.md

Defines the `onDrag` callback function for TanStack Ranger. This function is executed when a handler is dragged, receiving the Ranger instance as an argument.

```typescript
onDrag: (instance: Ranger<TTrackElement>) => void
```

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

### Custom Steps Option

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/custom-steps.md

Defines an array of custom steps to override the default step size. This option is part of the Ranger component configuration.

```ts
steps: Array<number>
```

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

### Custom Ticks Option

Source: https://github.com/tanstack/ranger/blob/main/docs/framework/react/api/custom-steps.md

Defines an array of custom ticks to override the default tick size. This option allows for precise placement of ticks on the ranger.

```ts
ticks: Array<number>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.