### Run Example App Manually

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Manually run the example app by first installing its node modules, then installing pods for iOS, and finally running the app.

```sh
npx react-native run-<platform>
```

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

### Build and Run Web Example

Source: https://github.com/callstack/react-native-slider/blob/main/example-web/README.md

Follow these steps to build the library and run the development server for the web example. Remember to rebuild the library and restart the server after making changes to the underlying code.

```sh
# go to the `package` folder
cd ../package
# build the library
npm run prepare
# go back to the example
cd ../example-web
```

```sh
npm start
```

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

### Install Dependencies

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Install all project dependencies by running this command in the root directory of the repository.

```sh
npm install
```

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

### Run Example App

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Execute the example application on a specific platform using this command. Replace '<platform>' with 'ios', 'android', or 'windows'.

```sh
npm run example-<platform>
```

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

### Install @react-native-community/slider

Source: https://context7.com/callstack/react-native-slider/llms.txt

Install the package using npm or yarn. For iOS, ensure CocoaPods are linked.

```bash
# npm
npm install @react-native-community/slider --save
```

```bash
# yarn
yarn add @react-native-community/slider
```

```bash
# iOS – install CocoaPods
npx pod-install
```

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

### Install React Native Slider with Yarn

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Use this command to add the slider component to your project using Yarn.

```bash
yarn add @react-native-community/slider
```

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

### Install React Native Slider with NPM

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Use this command to add the slider component to your project using NPM.

```bash
npm install @react-native-community/slider --save
```

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

### Basic React Native Slider Usage

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This snippet demonstrates the fundamental implementation of the Slider component. Ensure you have installed the library and run `npx pod-install` for iOS.

```javascript
import Slider from '@react-native-community/slider';

<Slider
  style={{width: 200, height: 40}}
  minimumValue={0}
  maximumValue={1}
  minimumTrackTintColor="#FFFFFF"
  maximumTrackTintColor="#000000"
  thumbSize={32}
/>
```

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

### Continuous Drag Callback with `onValueChange`

Source: https://context7.com/callstack/react-native-slider/llms.txt

Use `onValueChange` to get real-time updates as the user drags the slider thumb. This is useful for live feedback.

```tsx
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function LiveFeedback() {
  const [live, setLive] = useState(0);

  return (
    <View style={{padding: 20}}>
      <Text>Live value: {live.toFixed(3)}</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={1}
        onValueChange={(v) => setLive(v)}
      />
    </View>
  );
}
```

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

### Lint and Test Package

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Run these commands to ensure your code adheres to linting rules and passes all tests before contributing. Ensure you are in the package directory.

```sh
cd package/
npm run lint
npm run test
```

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

### Gesture Lifecycle Callbacks: `onSlidingStart` and `onSlidingComplete`

Source: https://context7.com/callstack/react-native-slider/llms.txt

Utilize `onSlidingStart` to capture the value when the user begins interacting with the slider and `onSlidingComplete` for the final committed value upon release.

```tsx
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function GestureCallbacks() {
  const [start, setStart] = useState<number | null>(null);
  const [end, setEnd] = useState<number | null>(null);

  return (
    <View style={{padding: 20}}>
      <Text>Started at: {start?.toFixed(3) ?? '—'}</Text>
      <Text>Committed:  {end?.toFixed(3) ?? '—'}</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={1}
        onSlidingStart={(v) => setStart(v)}
        onSlidingComplete={(v) => setEnd(v)}
      />
    </View>
  );
}
```

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

### `onSlidingStart` / `onSlidingComplete` — Gesture Lifecycle Callbacks

Source: https://context7.com/callstack/react-native-slider/llms.txt

These callbacks manage the gesture lifecycle of the slider. `onSlidingStart` is triggered on initial touch, and `onSlidingComplete` is triggered upon release.

```APIDOC
## `onSlidingStart` / `onSlidingComplete` — Gesture Lifecycle Callbacks

### Description
`onSlidingStart` fires when the user first touches the slider (receives the value at touch-down). `onSlidingComplete` fires when the user releases the thumb (receives the final committed value).

### Method
Callback Functions

### Parameters
#### `onSlidingStart` Callback Parameters
- **v** (number) - The value of the slider at the moment of touch-down.

#### `onSlidingComplete` Callback Parameters
- **v** (number) - The final committed value of the slider upon release.

### Request Example
```tsx
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  onSlidingStart={(v) => console.log('Started at:', v)}
  onSlidingComplete={(v) => console.log('Completed at:', v)}
/>
```

### Response
#### Callback Response
- **v** (number) - The value relevant to the specific callback (`onSlidingStart` or `onSlidingComplete`).
```

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

### Using Custom Thumb Images with `thumbImage`

Source: https://context7.com/callstack/react-native-slider/llms.txt

Replace the default slider thumb with a custom image using the `thumbImage` prop. It supports local and network images and is scaled by `thumbSize`.

```tsx
import Slider from '@react-native-community/slider';

// Local image thumb
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  thumbImage={require('./assets/custom-thumb.png')}
  thumbSize={40}
/>

// Network image thumb (Windows)
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  thumbImage={{uri: 'https://example.com/thumb-icon.png'}}
/>
```

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

### Custom Step Marker Component (`StepMarker`)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Implement a custom component to render markers at each step position. Requires `step > 0` for visible steps. The component receives properties like `stepMarked`, `currentValue`, `index`, `min`, and `max`.

```tsx
import React, {FC, useState} from 'react';
import {Text, View} from 'react-native';
import Slider, {MarkerProps} from '@react-native-community/slider';

const DotMarker: FC<MarkerProps> = ({stepMarked, currentValue, index, max}) => {
  if (stepMarked) {
    // Thumb is here — render a callout bubble
    return (
      <View style={{alignItems: 'center'}}>
        <View style={{
          backgroundColor: '#1565C0',
          paddingHorizontal: 6,
          paddingVertical: 2,
          borderRadius: 4,
        }}>
          <Text style={{color: '#fff', fontSize: 10}}>
            {index}/{max}
          </Text>
        </View>
      </View>
    );
  }
  // Regular step dot
  return (
    <View style={{
      width: 10, height: 10,
      borderRadius: 5,
      backgroundColor: currentValue > index ? '#1565C0' : '#B0BEC5',
    }} />
  );
};

export default function MarkerSlider() {
  const [val, setVal] = useState(2);
  return (
    <View style={{padding: 20}}>
      <Text>Step: {val}</Text>
      <Slider
        style={{width: 300, height: 60}}
        minimumValue={0}
        maximumValue={5}
        step={1}
        value={val}
        tapToSeek
        StepMarker={DotMarker}
        onValueChange={setVal}
        minimumTrackTintColor="#1565C0"
        maximumTrackTintColor="#B0BEC5"
      />
    </View>
  );
}
```

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

### Customizing Thumb Appearance with `thumbTintColor` and `thumbSize`

Source: https://context7.com/callstack/react-native-slider/llms.txt

Modify the thumb's appearance using `thumbTintColor` (Android only) to tint the default thumb and `thumbSize` to set its width and height.

```tsx
import Slider from '@react-native-community/slider';

// Colored, enlarged thumb
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  thumbTintColor="#E91E63"
  thumbSize={36}
/>
```

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

### Built-in Step Number Labels (`renderStepNumber`)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Enable automatic rendering of numeric labels below the slider track. Requires `step > 0`. Font size adjusts automatically based on the number of steps (≤ 9 steps use a larger font).

```tsx
import React, {useState} from 'react';
import {View, Text} from 'react-native';
import Slider from '@react-native-community/slider';

export default function NumberedSteps() {
  const [val, setVal] = useState(3);
  return (
    <View style={{padding: 20}}>
      <Text>Level: {val}</Text>
      <Slider
        style={{width: 300, height: 60}}
        minimumValue={1}
        maximumValue={10}
        step={1}
        value={val}
        renderStepNumber
        tapToSeek
        onValueChange={setVal}
      />
    </View>
  );
}
```

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

### Screen Reader Support (`accessibilityUnits`, `accessibilityIncrements`)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Enhance screen reader announcements by providing custom unit labels and specific labels for each discrete value. Both properties must be used together.

```tsx
import Slider from '@react-native-community/slider';

<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={3}
  step={1}
  accessibilityUnits="stars"
  accessibilityIncrements={['0 stars', '1 star', '2 stars', '3 stars']}
/>
// Screen reader announces: "1 star" instead of "33%"
```

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

### renderStepNumber

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Enables the display of step numbers below the slider track. The font size is automatically adjusted based on the total number of steps.

```APIDOC
## `renderStepNumber`

### Description
Turns on the displaying of numbers of steps. Numbers of steps are displayed under the track. Two font sizes are available and they will be selected automatically depending on the overall number of steps.

### Usage
This is a boolean prop to enable step numbers.
```

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

### Imperative Handle (`ref`, `updateValue`)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Programmatically control the slider's thumb position on the Web using a forwarded ref. The `updateValue` method can be called to set a specific value without triggering events.

```tsx
import React, {useRef} from 'react';
import {Button, View} from 'react-native';
import Slider, {SliderRef} from '@react-native-community/slider';

export default function RefSlider() {
  const sliderRef = useRef<SliderRef>(null);

  return (
    <View style={{padding: 20}}>
      <Slider
        ref={sliderRef}
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={1}
      />
      <Button
        title="Reset to 0.5"
        onPress={() => sliderRef.current?.updateValue(0.5)}
      />
    </View>
  );
}
```

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

### Customizing Track Images with `trackImage`, `minimumTrackImage`, and `maximumTrackImage` (iOS)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Replace default track rendering with static images. `trackImage` applies to the entire track, while `minimumTrackImage` and `maximumTrackImage` allow for separate styling of filled and unfilled sections.

```tsx
import Slider from '@react-native-community/slider';

// Full track image
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  trackImage={require('./assets/track.png')}
/>

// Separate min/max track images
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  minimumTrackImage={require('./assets/track-left.png')}
  maximumTrackImage={require('./assets/track-right.png')}
/>
```

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

### Slider Properties

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This section details the available properties for the Slider component, including their types, descriptions, and platform availability.

```APIDOC
## Slider Properties

### Properties

| Property | Description | Type | Platform |
| -------- | ----------- | ---- | -------- |
| `style` | Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. | View.style | |
| `disabled`| If true the user won't be able to move the slider.<br/>Default value is false. | bool | |
| `maximumValue` | Initial maximum value of the slider.<br/>Default value is 1. | number | |
| `minimumTrackTintColor` | The color used for the track to the left of the button.<br/>Overrides the default blue gradient image on iOS. | [color](https://reactnative.dev/docs/colors) | |
| `minimumValue` | Initial minimum value of the slider.<br/>Default value is 0. | number | |
| `lowerLimit` | Slide lower limit. The user won't be able to slide below this limit. | number | Android, iOS, Web |
| `upperLimit` | Slide upper limit. The user won't be able to slide above this limit. | number | Android, iOS, Web |
| `onSlidingStart` | Callback that is called when the user picks up the slider.<br/>The initial value is passed as an argument to the callback handler. | function | |
| `onSlidingComplete` | Callback that is called when the user releases the slider, regardless if the value has changed.<br/>The current value is passed as an argument to the callback handler. | function | |
| `onValueChange` | Callback continuously called while the user is dragging the slider. | function | |
| `step` | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.<br/>On Windows OS the default value is 1% of slider's range (from `minimumValue` to `maximumValue`). | number | |
| `maximumTrackTintColor` | The color used for the track to the right of the button.<br/>Overrides the default gray gradient image on iOS. | [color](https://reactnative.dev/docs/colors) | |
| `testID` | Used to locate this view in UI automation tests. | string | |
| `value` | Write-only property representing the value of the slider. Can be used to programmatically control the position of the thumb. Entered once at the beginning still acts as an initial value. Changing the value programmatically does not trigger any event.<br/>The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.<br/>_This is not a controlled component_, you don't need to update the value during dragging. | number | |
| `tapToSeek` | Permits tapping on the slider track to set the thumb position.<br/>Defaults to false on iOS. No effect on Android or Windows. | bool | iOS |
| `inverted` | Reverses the direction of the slider.<br/>Default value is false. | bool | |
| `vertical` | Changes the orientation of the slider to vertical, if set to `true`.<br/>Default value is false. | bool | Windows |
| `thumbTintColor` | Color of the foreground switch grip.<br/>**NOTE:** This prop will override the `thumbImage` prop set, meaning that if both `thumbImage` and `thumbTintColor` will be set, image used for the thumb may not be displayed correctly! | [color](https://reactnative.dev/docs/colors) | Android |
| `thumbSize` | Sets the size (width and height) of the thumb.<br/>If `thumbImage` is provided, it will be scaled to this size.<br/>Units: points on iOS, dp on Android. | number | Android, iOS, Web |
| `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
| `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
| `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image<br/>.propTypes<br/>.source | |
| `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>` | iOS, Android, Windows |
| [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | iOS, Android, Windows |
| `ref` | Reference object. | MutableRefObject | web |
| `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | |
```

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

### Basic Slider Usage

Source: https://context7.com/callstack/react-native-slider/llms.txt

Renders a horizontal slider with default values from 0 to 1. Use `onValueChange` to update state.

```tsx
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function BasicSlider() {
  const [volume, setVolume] = useState(0.5);

  return (
    <View style={{padding: 20}}>
      <Text>Volume: {volume.toFixed(2)}</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={1}
        value={volume}
        onValueChange={setVolume}
        minimumTrackTintColor="#1EB1FC"
        maximumTrackTintColor="#d3d3d3"
      />
    </View>
  );
}
```

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

### StepMarker Prop

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

Allows for custom components to be rendered for each step on the slider, including the thumb and other steps along the track. The custom component receives several parameters to customize its appearance and behavior.

```APIDOC
## `StepMarker`

### Description
Your custom component rendered for every step on the Slider, both the thumb and the rest of steps along the Slider's whole length. This `StepMarker` prop accepts your custom component and provides it with the following parameters:

### Parameters

- **stepMarked** (boolean) - Indicates whether that custom step is the one that the thumb is currently on. If user drags or clicks on that step, thumb will be moved there and the `stepMarked` parameter will be set to `true`. Use it, to differentiate between rendering your custom thumb component, or your custom step marker.
- **currentValue** (number) - Contains the `number` type saying at which value of the Slider the thumb currently is. Use it, for example, to render the Slider value on every step marker, or to render different step marker's variant depending on the Thumb position.
- **index** (number) - Contains the index at which this exact instantiation of your custom step marker was rendered at. Use it if you would like to render step number within the step marker, or, for example, if you want to render many variants of step marker depending on their positions along the Slider's width.
- **min** (number) - Minimum value of the Slider. It is equal to `minimumValue` and has the same default if not set.
- **max** (number) - Maximum value of the Slider. It is equal to `maximumValue` and has the same default if not set.
```

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

### Slider with Discrete Steps

Source: https://context7.com/callstack/react-native-slider/llms.txt

Enables discrete steps by setting the `step` prop. `tapToSeek` (iOS only) allows tapping the track to jump to the nearest step.

```tsx
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function SteppedSlider() {
  const [rating, setRating] = useState(3);

  return (
    <View style={{padding: 20}}>
      <Text>Rating: {rating} / 5</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        value={rating}
        tapToSeek   // iOS only — tap track to jump
        onValueChange={setRating}
        minimumTrackTintColor="#FFD700"
        maximumTrackTintColor="#C0C0C0"
      />
    </View>
  );
}
```

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

### `thumbImage` — Custom Thumb Image

Source: https://context7.com/callstack/react-native-slider/llms.txt

Replace the default slider thumb with a custom image, either from local assets or a remote URL.

```APIDOC
## `thumbImage` — Custom Thumb Image

### Description
Replaces the default thumb with a local or remote static image. On iOS/Android the source is resolved via `Image.resolveAssetSource`. Not compatible with base64-encoded SVGs.

### Method
Prop

### Parameters
#### Prop Parameters
- **thumbImage** (object | number) - Optional - The source for the custom thumb image. Can be an object with a `uri` property for network images or a require() path for local images.
```

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

### Tap-to-Seek Functionality (`tapToSeek`)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Enables immediate thumb repositioning when the track is tapped on iOS. This feature has no effect on Android or Windows.

```tsx
import Slider from '@react-native-community/slider';

<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  tapToSeek   // iOS only
/>
```

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

### `thumbTintColor` / `thumbSize` — Thumb Appearance

Source: https://context7.com/callstack/react-native-slider/llms.txt

Customize the slider's thumb appearance with `thumbTintColor` for color (Android) and `thumbSize` for dimensions.

```APIDOC
## `thumbTintColor` / `thumbSize` — Thumb Appearance

### Description
`thumbTintColor` (Android) tints the default thumb. `thumbSize` sets the thumb's width and height in platform units (points on iOS, dp on Android, pixels on Web). If a `thumbImage` is also provided it will be scaled to `thumbSize`.

### Method
Prop

### Parameters
#### Prop Parameters
- **thumbTintColor** (string) - Optional - The color to tint the thumb (primarily for Android).
- **thumbSize** (number) - Optional - The width and height of the thumb in platform units.
```

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

### Programmatic Slider Value Setting

Source: https://context7.com/callstack/react-native-slider/llms.txt

Sets the initial thumb position using the `value` prop. Changing `value` programmatically repositions the thumb without firing events.

```tsx
import React, {useRef} from 'react';
import {Button, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function ProgrammaticSlider() {
  return (
    <View>
      {/* Thumb starts at 0.7 */}
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={1}
        value={0.7}
        onValueChange={(v) => console.log('dragging:', v)}
      />
    </View>
  );
}
```

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

### Customizing Track Colors with `minimumTrackTintColor` and `maximumTrackTintColor`

Source: https://context7.com/callstack/react-native-slider/llms.txt

Independently color the filled (left) and unfilled (right) portions of the slider track using `minimumTrackTintColor` and `maximumTrackTintColor`.

```tsx
import Slider from '@react-native-community/slider';

<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  value={0.5}
  minimumTrackTintColor="#00C853"   // green filled track
  maximumTrackTintColor="#CFD8DC"   // grey empty track
/>
```

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

### StepMarker Props: min

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This number prop represents the minimum value of the slider. It defaults to the `minimumValue` prop if not explicitly set.

```typescript
min: number;
```

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

### `trackImage` / `minimumTrackImage` / `maximumTrackImage` — Custom Track Images (iOS)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Allows replacement of the default track rendering with custom static images for the entire track or specific sections.

```APIDOC
## `trackImage` / `minimumTrackImage` / `maximumTrackImage` — Custom Track Images (iOS)

### Description
Replace the default track rendering with static images. `trackImage` covers the full track; `minimumTrackImage` and `maximumTrackImage` tile the filled and unfilled sections separately (stretched from their inner edge pixel).

### Method
Prop

### Parameters
#### Prop Parameters
- **trackImage** (number) - Optional - Source for a full track image (iOS only).
- **minimumTrackImage** (number) - Optional - Source for the minimum track image (iOS only).
- **maximumTrackImage** (number) - Optional - Source for the maximum track image (iOS only).
```

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

### Reversing Slider Direction with `inverted` prop

Source: https://context7.com/callstack/react-native-slider/llms.txt

Use the `inverted` prop to flip the slider's direction, making dragging right decrease the value and dragging left increase it.

```tsx
import Slider from '@react-native-community/slider';

<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  value={0.6}
  inverted
/>
```

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

### `minimumTrackTintColor` / `maximumTrackTintColor` — Track Colors

Source: https://context7.com/callstack/react-native-slider/llms.txt

These props allow independent coloring of the filled (minimum) and unfilled (maximum) portions of the slider track.

```APIDOC
## `minimumTrackTintColor` / `maximumTrackTintColor` — Track Colors

### Description
Color the filled (left) and unfilled (right) portions of the track independently.

### Method
Prop

### Parameters
#### Prop Parameters
- **minimumTrackTintColor** (string) - Optional - The color of the filled portion of the track.
- **maximumTrackTintColor** (string) - Optional - The color of the unfilled portion of the track.
```

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

### StepMarker Props: index

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This number prop indicates the index at which the custom step marker was rendered. Useful for rendering step numbers or position-dependent variants.

```typescript
index: number;
```

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

### `onValueChange` — Continuous Drag Callback

Source: https://context7.com/callstack/react-native-slider/llms.txt

This callback fires continuously as the user drags the slider's thumb, providing the current numeric value.

```APIDOC
## `onValueChange` — Continuous Drag Callback

### Description
Fires continuously while the user drags the thumb. Receives the current numeric value.

### Method
Callback Function

### Parameters
#### Callback Parameters
- **v** (number) - The current numeric value of the slider.

### Request Example
```tsx
<Slider
  style={{width: 300, height: 40}}
  minimumValue={0}
  maximumValue={1}
  onValueChange={(v) => console.log(v)}
/>
```

### Response
#### Callback Response
- **v** (number) - The current value during the drag.
```

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

### Slider with Custom Range

Source: https://context7.com/callstack/react-native-slider/llms.txt

Defines the numeric bounds of the slider using `minimumValue` and `maximumValue` props. Defaults are 0 and 1.

```tsx
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function RangeSlider() {
  const [temp, setTemp] = useState(20);

  return (
    <View style={{padding: 20}}>
      <Text>Temperature: {temp}°C</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={-30}
        maximumValue={50}
        value={temp}
        onValueChange={setTemp}
      />
    </View>
  );
}
```

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

### Attach Test Identifier with `testID`

Source: https://context7.com/callstack/react-native-slider/llms.txt

Use the `testID` prop to attach a unique identifier to the slider's native view. This identifier can then be used in automated tests to find and interact with the slider.

```tsx
import Slider from '@react-native-community/slider';

<Slider testID="volume-slider" minimumValue={0} maximumValue={1} />
```

```typescript
import React from 'react';
import {fireEvent, render} from '@testing-library/react-native';
import Slider from '@react-native-community/slider';

test('calls onValueChange when value changes', () => {
  const onValueChange = jest.fn();
  const {getByTestId} = render(
    <Slider testID="volume-slider" onValueChange={onValueChange} />,
  );
  fireEvent(getByTestId('volume-slider'), 'change', {nativeEvent: {value: 0.8}});
  expect(onValueChange).toHaveBeenCalledWith(0.8);
});
```

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

### Slider with Sliding Bounds

Source: https://context7.com/callstack/react-native-slider/llms.txt

Restricts dragging to a specific range using `lowerLimit` and `upperLimit`. Supported on Android, iOS, and Web. Emits a warning if `lowerLimit >= upperLimit`.

```tsx
import React, {useState} from 'react';
import {Text, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function BoundedSlider() {
  const [val, setVal] = useState(50);

  return (
    <View style={{padding: 20}}>
      <Text>Value (locked to 30–80): {val}</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={100}
        step={1}
        value={val}
        lowerLimit={30}
        upperLimit={80}
        onValueChange={setVal}
      />
    </View>
  );
}
```

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

### Vertical Orientation (`vertical`)

Source: https://context7.com/callstack/react-native-slider/llms.txt

Renders the slider vertically. This property only affects the appearance on Windows.

```tsx
import Slider from '@react-native-community/slider';

<Slider
  style={{height: 200, width: 40}}
  minimumValue={0}
  maximumValue={1}
  value={0.6}
  vertical   // Windows only
/>
```

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

### StepMarker Props: currentValue

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This number prop represents the current value of the slider's thumb. Use it to display the slider's value on each step marker or to apply different styles based on the thumb's position.

```typescript
currentValue: number;
```

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

### StepMarker Props: stepMarked

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This boolean prop indicates if the current step is marked by the thumb. It changes to true when the thumb is moved to this step.

```typescript
stepMarked: boolean;
```

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

### StepMarker Props: max

Source: https://github.com/callstack/react-native-slider/blob/main/README.md

This number prop represents the maximum value of the slider. It defaults to the `maximumValue` prop if not explicitly set.

```typescript
max: number;
```

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

### Disabling Slider Interaction with `disabled` prop

Source: https://context7.com/callstack/react-native-slider/llms.txt

Set the `disabled` prop to `true` to prevent users from interacting with the slider. This prop also integrates with `accessibilityState.disabled`.

```tsx
import React, {useState} from 'react';
import {Button, View} from 'react-native';
import Slider from '@react-native-community/slider';

export default function DisabledSlider() {
  const [locked, setLocked] = useState(true);

  return (
    <View style={{padding: 20}}>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={1}
        value={0.4}
        disabled={locked}
      />
      <Button title={locked ? 'Unlock' : 'Lock'} onPress={() => setLocked(l => !l)} />
    </View>
  );
}
```

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

### `disabled` — Preventing Interaction

Source: https://context7.com/callstack/react-native-slider/llms.txt

When the `disabled` prop is set to `true`, the slider's thumb becomes non-interactive, preventing any user movement.

```APIDOC
## `disabled` — Preventing Interaction

### Description
When `disabled` is `true` the thumb cannot be moved. Also integrates with `accessibilityState.disabled`.

### Method
Prop

### Parameters
#### Prop Parameters
- **disabled** (boolean) - Required - If `true`, the slider is disabled and cannot be interacted with.
```

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

### `inverted` — Reversing Direction

Source: https://context7.com/callstack/react-native-slider/llms.txt

The `inverted` prop reverses the slider's direction. When set to `true`, dragging right decreases the value, and dragging left increases it.

```APIDOC
## `inverted` — Reversing Direction

### Description
Flips the thumb so that dragging right decreases the value (or left increases it).

### Method
Prop

### Parameters
#### Prop Parameters
- **inverted** (boolean) - Optional - If `true`, the slider's direction is reversed.
```

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