### Handle Slider Touch Start in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Callback executed when a user initiates interaction with the slider. It provides the current low and high values at the start of the touch. The high value is disregarded if `disableRange` is enabled.

```TypeScript
onSliderTouchStart: (low: number, high: number) => void;
```

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

### Implement RN Range Slider with Custom Components

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

Demonstrates how to integrate the RangeSlider component into a React Native application. It shows the setup for custom rendering of thumbs, rails, labels, and notches, along with handling value changes and touch events. This example requires React Native and the 'rn-range-slider' library.

```tsx
import React, { useCallback, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

// Custom thumb component
const Thumb = () => (
  <View style={styles.thumb} />
);

// Custom rail (background track)
const Rail = () => (
  <View style={styles.rail} />
);

// Custom selected rail (highlighted track)
const RailSelected = () => (
  <View style={styles.railSelected} />
);

// Custom label showing the value
const Label = ({ text }) => (
  <View style={styles.label}>
    <Text style={styles.labelText}>{text}</Text>
  </View>
);

// Custom notch (small triangle below label)
const Notch = () => (
  <View style={styles.notch} />
);

const App = () => {
  const [low, setLow] = useState(20);
  const [high, setHigh] = useState(80);

  const renderThumb = useCallback(() => <Thumb />, []);
  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected />, []);
  const renderLabel = useCallback((value) => <Label text={value} />, []);
  const renderNotch = useCallback(() => <Notch />, []);

  const handleValueChange = useCallback((low, high, fromUser) => {
    setLow(low);
    setHigh(high);
    if (fromUser) {
      console.log('User changed values to:', low, high);
    }
  }, []);

  const handleSliderTouchStart = useCallback((low, high) => {
    console.log('Touch started at:', low, high);
  }, []);

  const handleSliderTouchEnd = useCallback((low, high) => {
    console.log('Touch ended at:', low, high);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.valueText 저}>
        Selected Range: {low} - {high}
      </Text>
      <RangeSlider
        style={styles.slider}
        min={0}
        max={100}
        step={1}
        low={low}
        high={high}
        floatingLabel
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        renderLabel={renderLabel}
        renderNotch={renderNotch}
        onValueChanged={handleValueChange}
        onSliderTouchStart={handleSliderTouchStart}
        onSliderTouchEnd={handleSliderTouchEnd}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  slider: {
    height: 80,
  },
  thumb: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#3b82f6',
    borderWidth: 2,
    borderColor: '#ffffff',
  },
  rail: {
    flex: 1,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#e5e7eb',
  },
  railSelected: {
    height: 4,
    backgroundColor: '#3b82f6',
    borderRadius: 2,
  },
  label: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    backgroundColor: '#3b82f6',
    borderRadius: 4,
  },
  labelText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  notch: {
    width: 8,
    height: 8,
    backgroundColor: '#3b82f6',
    transform: [{ rotate: '45deg' }],
  },
  valueText: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
});

export default App;

```

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

### Set Minimum Range Constraint in React Native Range Slider

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

This example demonstrates how to enforce a minimum distance between the two thumbs of the RangeSlider using the `minRange` prop. It prevents users from moving the thumbs closer than the specified value. The snippet also shows custom rendering for different colored thumbs based on whether they represent the low or high value.

```tsx
import React, { useCallback, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

const Thumb = () => <View style={styles.thumb} />;
const Rail = () => <View style={styles.rail} />;
const RailSelected = () => <View style={styles.railSelected} />;

const MinRangeSlider = () => {
  const [low, setLow] = useState(30);
  const [high, setHigh] = useState(70);

  const renderThumb = useCallback((name) => {
    // Render different colors for low and high thumbs
    return (
      <View
        style={[ 
          styles.thumb,
          { backgroundColor: name === 'low' ? '#ef4444' : '#3b82f6' },
        ]}
      />
    );
  }, []);

  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected />, []);

  const handleValueChange = useCallback((low, high, fromUser) => {
    setLow(low);
    setHigh(high);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.valueText}>
        Range: {low} - {high} (minimum gap: 20)
      </Text>
      <Text style={styles.infoText}>
        Thumbs cannot be moved closer than 20 units apart
      </Text>
      <RangeSlider
        style={styles.slider}
        min={0}
        max={100}
        step={1}
        minRange={20}
        low={low}
        high={high}
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        onValueChanged={handleValueChange}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  slider: {
    height: 60,
  },
  thumb: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  rail: {
    flex: 1,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#e5e7eb',
  },
  railSelected: {
    height: 4,
    backgroundColor: '#8b5cf6',
    borderRadius: 2,
  },
  valueText: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  infoText: {
    fontSize: 14,
    color: '#6b7280',
    marginBottom: 20,
  },
});

export default MinRangeSlider;

```

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

### Basic RangeSlider Usage in React Native

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

This snippet demonstrates the basic implementation of the RangeSlider component in a React Native application. It shows how to import the component, define callback functions for rendering custom elements (Thumb, Rail, RailSelected, Label, Notch), and handle value changes. The component requires React Native versions 0.59.0 or higher due to its use of React hooks.

```javascript
import React, { useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

// Placeholder components for Thumb, Rail, RailSelected, Label, Notch
const Thumb = () => <View style={{ width: 20, height: 20, backgroundColor: 'blue' }} />;
const Rail = () => <View style={{ height: 4, backgroundColor: 'grey' }} />;
const RailSelected = () => <View style={{ height: 4, backgroundColor: 'green' }} />;
const Label = ({ text }) => <View><Text>{text}</Text></View>;
const Notch = () => <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: 'red' }} />;

const App = () => {
  const [low, setLow] = React.useState(0);
  const [high, setHigh] = React.useState(100);

  const renderThumb = useCallback(() => <Thumb/>, []);
  const renderRail = useCallback(() => <Rail/>, []);
  const renderRailSelected = useCallback(() => <RailSelected/>, []);
  const renderLabel = useCallback(value => <Label text={value}/>, []);
  const renderNotch = useCallback(() => <Notch/>, []);

  const handleValueChange = useCallback((low, high) => {
    setLow(low);
    setHigh(high);
  }, []);

  return (
    <View style={styles.container}>
      <RangeSlider
        style={styles.slider}
        min={0}
        max={100}
        step={1}
        floatingLabel
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        renderLabel={renderLabel}
        renderNotch={renderNotch}
        onValueChanged={handleValueChange}
      />
      <Text>Low: {low}, High: {high}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  slider: {
    width: '100%',
    height: 40,
  },
});

export default App;

```

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

### Track Component Width with Layout Hook (TypeScript)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

The useWidthLayout hook simplifies tracking the width of a component and executing a callback function whenever the component's layout changes. It leverages React Native's onLayout event. Dependencies: 'rn-range-slider/hooks', 'react'. Input: ref for width storage, callback function. Output: onLayout event handler.

```typescript
import { useWidthLayout } from 'rn-range-slider/hooks';
import { useRef } from 'react';
import { View } from 'react-native';

function ResponsiveComponent() {
  const widthRef = useRef(0);

  const handleWidthChange = (newWidth) => {
    console.log('Component width changed to:', newWidth);
    // Recalculate positions or update animations
  };

  const onLayout = useWidthLayout(widthRef, handleWidthChange);

  return (
    <View onLayout={onLayout} style={{ flex: 1 }}>
      {/* Current width: {widthRef.current}px */}
    </View>
  );
}
```

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

### Render Thumb in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Defines how the draggable thumb elements of the slider should be rendered. The `name` parameter differentiates between 'high' and 'low' value thumbs, allowing for custom styling of each. This prop is required.

```TypeScript
renderThumb: (name: 'high' | 'low') => Node;
```

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

### Render Notch in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Controls the rendering of notches, usually small markers positioned below the labels and above the thumbs. The notch's behavior is influenced by `allowLabelOverflow`; if false, it will move with the thumb even if the label is constrained by component edges.

```TypeScript
renderNotch: () => Node;
```

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

### Render Selected Rail in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Defines how the selected portion of the 'rail' between the thumbs should be rendered. Unlike the main rail, this component should not have `flex: 1` to ensure it fills only the space between the thumbs. This prop is required.

```TypeScript
renderRailSelected: () => Node;
```

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

### Create Following Label for Slider Thumb (TypeScript)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

The useThumbFollower hook helps create a floating label component that dynamically follows a slider's active thumb. It optimizes re-renders and manages the label's position based on thumb movement and container dimensions. Dependencies: 'rn-range-slider/hooks', 'react'. Input: containerWidthRef, gestureStateRef, renderLabel function, isPressed, allowOverflow. Output: label view and update function.

```typescript
import { useThumbFollower } from 'rn-range-slider/hooks';
import { useRef } from 'react';
import { Text, View } from 'react-native';

function SliderWithFollowingLabel() {
  const containerWidthRef = useRef(300);
  const gestureStateRef = useRef({ lastValue: 50, lastPosition: 150 });
  const isPressed = true;
  const allowOverflow = false;

  const renderLabel = (value) => (
    <View style={{ padding: 8, backgroundColor: 'blue' }}>
      <Text style={{ color: 'white' }}>{value}</Text>
    </View>
  );

  const [labelView, labelUpdate] = useThumbFollower(
    containerWidthRef,
    gestureStateRef,
    renderLabel,
    isPressed,
    allowOverflow
  );

  // Update label when thumb moves
  const handleThumbMove = (position, value) => {
    if (labelUpdate) {
      labelUpdate(position, value);
    }
  };

  return <View>{labelView}</View>;
}
```

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

### Render Rail in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Specifies the rendering of the base track or 'rail' on which the slider thumbs move. The rendered component must have `flex: 1` style to occupy the available horizontal space correctly. This prop is required.

```TypeScript
renderRail: () => Node;
```

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

### Render Label in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Determines the rendering of labels, typically displayed above the slider thumbs. If no function is provided, no labels will be displayed. The function receives the current value.

```TypeScript
renderLabel: (value: number) => Node;
```

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

### Handle Value Change in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

A callback function that is invoked whenever the slider's values change. It receives the low and high values, and a boolean `fromUser` indicating if the change resulted from user interaction. The high value should be ignored if `disableRange` is true.

```TypeScript
onValueChanged: (low: number, high: number, fromUser: boolean) => void;
```

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

### Handle Slider Touch End in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

Callback triggered when a user finishes interacting with the slider. It passes the final low and high values. Similar to `onSliderTouchStart`, the high value is ignored when `disableRange` is set to true.

```TypeScript
onSliderTouchEnd: (low: number, high: number) => void;
```

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

### Configures Label Container Positioning - TypeScript

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

Configures label container positioning for floating or fixed label modes using the `useLabelContainerProps` hook. It accepts a boolean `floating` prop to determine the label's behavior. The hook returns props to be spread onto the label's container View.

```typescript
import { useLabelContainerProps } from 'rn-range-slider/hooks';
import { View, Text } from 'react-native';

function SliderWithLabel({ floating }) {
  const labelContainerProps = useLabelContainerProps(floating);

  return (
    <View>
      <View {...labelContainerProps}>
        <Text>Current Value: 50</Text>
      </View>
      {/* Slider content */}
    </View>
  );
}

// Usage with floating labels (renders above content)
<SliderWithLabel floating={true} />

// Usage with fixed labels (takes up space in layout)
<SliderWithLabel floating={false} />
```

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

### Allow Label Overflow in RN Range Slider

Source: https://github.com/githuboftigran/rn-range-slider/blob/master/README.md

A boolean prop that controls whether labels can extend beyond the slider component's boundaries. When false, labels are constrained within the component's edges.

```TypeScript
allowLabelOverflow?: boolean;
```

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

### Manage Slider Low/High Values with State (TypeScript)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

The useLowHigh hook manages the low and high values of a range slider, ensuring they stay within the defined minimum and maximum bounds and respect the step increments. It provides refs for current and previous values, along with setters for updating them. Dependencies: 'rn-range-slider/hooks'.

```typescript
import { useLowHigh } from 'rn-range-slider/hooks';

function CustomSlider({ lowProp, highProp, min, max, step }) {
  // Hook returns validated refs and setters
  const { inPropsRef, inPropsRefPrev, setLow, setHigh } = useLowHigh(
    lowProp,
    highProp,
    min,
    max,
    step
  );

  // Access current values
  const currentLow = inPropsRef.current.low;
  const currentHigh = inPropsRef.current.high;

  // Update values (automatically clamped to min/max)
  const handleLowChange = (newValue) => {
    setLow(newValue);
    console.log('Low value updated:', inPropsRef.current.low);
  };

  const handleHighChange = (newValue) => {
    setHigh(newValue);
    console.log('High value updated:', inPropsRef.current.high);
  };

  // Check if values changed from previous render
  const { lowPrev, highPrev } = inPropsRefPrev;
  if (currentLow !== lowPrev || currentHigh !== highPrev) {
    console.log('Values changed:', { currentLow, currentHigh });
  }

  return null;
}
```

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

### Configure Single Value Slider Mode in React Native

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

This snippet shows how to set up the RangeSlider component to function as a single-value selector. It uses the `disableRange={true}` prop and captures the single value from the `low` parameter in the `onValueChanged` callback. Custom thumb, rail, and label components are also defined.

```tsx
import React, { useCallback, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

const Thumb = () => <View style={styles.thumb} />;
const Rail = () => <View style={styles.rail} />;
const RailSelected = () => <View style={styles.railSelected} />;
const Label = ({ text }) => (
  <View style={styles.label}>
    <Text style={styles.labelText}>{text}</Text>
  </View>
);

const SingleValueSlider = () => {
  const [value, setValue] = useState(50);

  const renderThumb = useCallback(() => <Thumb />, []);
  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected />, []);
  const renderLabel = useCallback((val) => <Label text={val} />, []);

  const handleValueChange = useCallback((low, high, fromUser) => {
    // In single value mode, use the 'low' parameter
    setValue(low);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.valueText}>Value: {value}</Text>
      <RangeSlider
        style={styles.slider}
        min={0}
        max={100}
        step={5}
        low={value}
        disableRange={true}
        floatingLabel
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        renderLabel={renderLabel}
        onValueChanged={handleValueChange}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  slider: {
    height: 80,
  },
  thumb: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#10b981',
  },
  rail: {
    flex: 1,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#d1d5db',
  },
  railSelected: {
    height: 4,
    backgroundColor: '#10b981',
    borderRadius: 2,
  },
  label: {
    padding: 8,
    backgroundColor: '#10b981',
    borderRadius: 4,
  },
  labelText: {
    color: '#ffffff',
    fontSize: 14,
  },
  valueText: {
    fontSize: 18,
    marginBottom: 20,
  },
});

export default SingleValueSlider;

```

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

### Determine Closer Thumb with isLowCloser Helper (TypeScript)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

Utilizes the 'isLowCloser' helper function from 'rn-range-slider/helpers' to determine which of the two slider thumbs (low or high) is closer to a given touch position. This is useful for handling user interactions and deciding which thumb to move. Requires 'rn-range-slider'.

```typescript
import { isLowCloser } from 'rn-range-slider/helpers';

// Example: Determine which thumb user is trying to interact with
const touchX = 150; // Touch position in pixels
const lowThumbPosition = 100; // Low thumb center position
const highThumbPosition = 200; // High thumb center position

const shouldMoveLowThumb = isLowCloser(touchX, lowThumbPosition, highThumbPosition);

if (shouldMoveLowThumb) {
  console.log('User is interacting with the low thumb');
} else {
  console.log('User is interacting with the high thumb');
}

// Edge case: when thumbs are at same position
const samePositionTouch = 50;
const thumbPosition = 100;
const result = isLowCloser(samePositionTouch, thumbPosition, thumbPosition);
// Returns true if touch is left of thumb, false if right
console.log('Touch left of thumb?', result); // true

```

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

### Configure Label Overflow in Range Slider (React Native)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

Demonstrates how to control whether labels extend beyond the slider's bounds using the 'allowLabelOverflow' prop in a React Native RangeSlider component. It includes state management for the overflow setting and visual feedback to the user. Requires 'react-native' and 'rn-range-slider'.

```tsx
import React, { useCallback, useState } from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import RangeSlider from 'rn-range-slider';

const Thumb = () => <View style={styles.thumb} />;
const Rail = () => <View style={styles.rail} />;
const RailSelected = () => <View style={styles.railSelected} />;
const Label = ({ text }) => (
  <View style={styles.label}>
    <Text style={styles.labelText}>{text}</Text>
  </View>
);
const Notch = () => <View style={styles.notch} />;

const OverflowConfigSlider = () => {
  const [low, setLow] = useState(5);
  const [high, setHigh] = useState(95);
  const [allowOverflow, setAllowOverflow] = useState(false);

  const renderThumb = useCallback(() => <Thumb />, []);
  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected />, []);
  const renderLabel = useCallback((value) => <Label text={value} />, []);
  const renderNotch = useCallback(() => <Notch />, []);

  const handleValueChange = useCallback((low, high) => {
    setLow(low);
    setHigh(high);
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.controlRow}>
        <Text style={styles.controlLabel}>Allow Label Overflow:</Text>
        <Switch value={allowOverflow} onValueChange={setAllowOverflow} />
      </View>
      <Text style={styles.infoText}>
        {allowOverflow
          ? 'Labels can extend beyond slider edges'
          : 'Labels are constrained within slider bounds'}
      </Text>
      <RangeSlider
        style={styles.slider}
        min={0}
        max={100}
        step={1}
        low={low}
        high={high}
        floatingLabel
        allowLabelOverflow={allowOverflow}
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        renderLabel={renderLabel}
        renderNotch={renderNotch}
        onValueChanged={handleValueChange}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  slider: {
    height: 100,
  },
  controlRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  controlLabel: {
    fontSize: 16,
  },
  infoText: {
    fontSize: 14,
    color: '#6b7280',
    marginBottom: 30,
  },
  thumb: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#8b5cf6',
  },
  rail: {
    flex: 1,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#e5e7eb',
  },
  railSelected: {
    height: 4,
    backgroundColor: '#8b5cf6',
    borderRadius: 2,
  },
  label: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    backgroundColor: '#8b5cf6',
    borderRadius: 6,
  },
  labelText: {
    color: '#ffffff',
    fontSize: 13,
    fontWeight: 'bold',
  },
  notch: {
    width: 8,
    height: 8,
    backgroundColor: '#8b5cf6',
    transform: [{ rotate: '45deg' }],
  },
});

export default OverflowConfigSlider;

```

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

### Clamp Value within Range (TypeScript)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

The clamp function restricts a given number to be within a specified minimum and maximum range. It's useful for ensuring user inputs or calculated values do not exceed defined boundaries. Dependencies: 'rn-range-slider/helpers'. Input: number, min: number, max: number. Output: number.

```typescript
import { clamp } from 'rn-range-slider/helpers';

// Basic usage
const value1 = clamp(150, 0, 100); // Returns 100
const value2 = clamp(-50, 0, 100); // Returns 0
const value3 = clamp(50, 0, 100);  // Returns 50

// Practical usage in slider context
function validateSliderValue(userValue, min, max) {
  const validValue = clamp(userValue, min, max);
  if (validValue !== userValue) {
    console.warn(`Value ${userValue} was clamped to ${validValue}`);
  }
  return validValue;
}

const sliderMin = 0;
const sliderMax = 100;
const userInput = 125;
const finalValue = validateSliderValue(userInput, sliderMin, sliderMax);
console.log(finalValue); // 100

// Use with price ranges
const minPrice = 10;
const maxPrice = 1000;
const selectedPrice = clamp(1500, minPrice, maxPrice);
console.log(`Selected price: $${selectedPrice}`); // $1000
```

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

### Manages Selected Rail Positioning - TypeScript

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

Manages the animated selected rail (highlighted portion) positioning and styling using the `useSelectedRail` hook. It takes slider properties, container dimensions, thumb width, and a disable range flag as input. The hook returns style properties for the selected rail and an update function.

```typescript
import { useSelectedRail } from 'rn-range-slider/hooks';
import { useRef } from 'react';
import { Animated, View } from 'react-native';

function CustomRangeSlider() {
  const inPropsRef = useRef({
    low: 25,
    high: 75,
    min: 0,
    max: 100,
    step: 1,
  });
  const containerWidthRef = useRef(300);
  const thumbWidth = 20;
  const disableRange = false;

  const [selectedRailStyle, updateSelectedRail] = useSelectedRail(
    inPropsRef,
    containerWidthRef,
    thumbWidth,
    disableRange
  );

  // Call updateSelectedRail when values change
  const handleValueChange = (newLow, newHigh) => {
    inPropsRef.current.low = newLow;
    inPropsRef.current.high = newHigh;
    updateSelectedRail();
  };

  return (
    <View style={{ height: 4, position: 'relative' }}>
      <Animated.View style={[selectedRailStyle, { backgroundColor: 'blue' }]} />
    </View>
  );
}
```

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

### Implement Disabled State for Range Slider

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

This React Native component demonstrates how to disable user interaction with the RangeSlider. It uses local state to manage the slider's low and high values, as well as its disabled status. The component also includes custom rendering for the thumb and rail, with distinct styles applied when the slider is disabled. Input is controlled via a toggle button.

```tsx
import React, { useCallback, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

const Thumb = ({ disabled }) => (
  <View
    style={[
            styles.thumb,
            disabled && styles.thumbDisabled,
    ]}
  />
);

const Rail = () => <View style={styles.rail} />;
const RailSelected = ({ disabled }) => (
  <View
    style={[
            styles.railSelected,
            disabled && styles.railSelectedDisabled,
    ]}
  />
);

const DisabledSlider = () => {
  const [low, setLow] = useState(25);
  const [high, setHigh] = useState(75);
  const [disabled, setDisabled] = useState(false);

  const renderThumb = useCallback(() => <Thumb disabled={disabled} />, [disabled]);
  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected disabled={disabled} />, [disabled]);

  const handleValueChange = useCallback((low, high) => {
    setLow(low);
    setHigh(high);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.valueText}>Range: {low} - {high}</Text>
      <RangeSlider
        style={styles.slider}
        min={0}
        max={100}
        step={1}
        low={low}
        high={high}
        disabled={disabled}
        renderThumb={renderThumb}
        renderRail={renderRail}
        renderRailSelected={renderRailSelected}
        onValueChanged={handleValueChange}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() => setDisabled(!disabled)}
      >
        <Text style={styles.buttonText}>
          {disabled ? 'Enable Slider' : 'Disable Slider'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  slider: {
    height: 60,
    marginBottom: 20,
  },
  thumb: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#3b82f6',
  },
  thumbDisabled: {
    backgroundColor: '#9ca3af',
  },
  rail: {
    flex: 1,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#e5e7eb',
  },
  railSelected: {
    height: 4,
    backgroundColor: '#3b82f6',
    borderRadius: 2,
  },
  railSelectedDisabled: {
    backgroundColor: '#9ca3af',
  },
  valueText: {
    fontSize: 16,
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#3b82f6',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default DisabledSlider;

```

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

### Convert Position to Slider Value (TypeScript)

Source: https://context7.com/githuboftigran/rn-range-slider/llms.txt

The getValueForPosition function translates a pixel position within a slider's container to a corresponding value, considering the slider's range, step size, and thumb dimensions. This is essential for mapping touch or drag events to slider values. Dependencies: 'rn-range-slider/helpers'. Input: touchPositionX, containerWidth, thumbWidth, minValue, maxValue, stepSize. Output: number.

```typescript
import { getValueForPosition } from 'rn-range-slider/helpers';

// Example: Converting touch position to slider value
const touchPositionX = 175; // User touched at 175px
const containerWidth = 300; // Slider container is 300px wide
const thumbWidth = 20; // Each thumb is 20px wide
const minValue = 0;
const maxValue = 100;
const stepSize = 5;

const sliderValue = getValueForPosition(
  touchPositionX,
  containerWidth,
  thumbWidth,
  minValue,
  maxValue,
  stepSize
);

console.log(`Touch at ${touchPositionX}px maps to value: ${sliderValue}`);

// Example: Price slider with $10 increments
const priceSlider = getValueForPosition(
  200, // Touch position
  400, // Container width
  24,  // Thumb width
  0,   // Min price $0
  500, // Max price $500
  10   // $10 increments
);
console.log(`Selected price: $${priceSlider}`);

// Example: Temperature selector with 0.5 degree steps
const temperature = getValueForPosition(
  100, // Touch position
  250, // Container width
  20,  // Thumb width
  15,  // Min temp 15°C
  30,  // Max temp 30°C
  0.5  // 0.5° increments
);
console.log(`Selected temperature: ${temperature}°C`);
```

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