### Basic React Native Slider Example

Source: https://context7.com/sharcoux/slider/llms.txt

Demonstrates a basic single-value slider with custom colors, step increments, and tap-to-slide functionality. It utilizes React hooks for state management and provides callbacks for value changes, sliding start, and completion.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Slider } from '@react-native-assets/slider';

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

  return (
    <View style={styles.container}>
      <Text>Value: {value}</Text>
      <Slider
        value={value}
        minimumValue={0}
        maximumValue={100}
        step={1}
        minimumTrackTintColor="#3b82f6"
        maximumTrackTintColor="#e5e7eb"
        thumbTintColor="#2563eb"
        trackHeight={4}
        thumbSize={20}
        slideOnTap={true}
        onValueChange={(newValue) => {
          setValue(newValue);
          console.log('Value changed:', newValue);
        }}
        onSlidingStart={(value) => console.log('Started sliding:', value)}
        onSlidingComplete={(value) => console.log('Finished sliding:', value)}
        style={styles.slider}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  slider: { width: 300, height: 40 }
});
```

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

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

Source: https://github.com/sharcoux/slider/blob/master/README.md

This command installs the slider package as a dependency for your project using npm. Ensure you have npm installed and configured in your project environment.

```bash
npm i -S @react-native-assets/slider
```

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

### Vertical React Native Slider Example

Source: https://context7.com/sharcoux/slider/llms.txt

Illustrates how to implement a vertical slider by setting the `vertical` prop to `true`. The `inverted` prop can be used to control the orientation (top-to-bottom or bottom-to-top). This example shows a volume control slider.

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

const VerticalSliderExample = () => {
  const [volume, setVolume] = useState(50);

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20 }}>
      <Text>Volume: {volume}%</Text>
      <Slider
        value={volume}
        minimumValue={0}
        maximumValue={100}
        step={5}
        vertical={true}
        inverted={false}
        minimumTrackTintColor="#10b981"
        maximumTrackTintColor="#d1d5db"
        thumbTintColor="#059669"
        trackHeight={6}
        thumbSize={24}
        onValueChange={setVolume}
        style={{ height: 200, width: 50, marginLeft: 20 }}
      />
    </View>
  );
};

```

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

### Customize Slider Styles (JavaScript)

Source: https://context7.com/sharcoux/slider/llms.txt

This example demonstrates how to customize the appearance of a single-value Slider component. It utilizes props like `thumbStyle`, `trackStyle`, `minTrackStyle`, and `maxTrackStyle` to define specific visual properties for the thumb and track segments. Dependencies include React, React Native core components, and the Slider component from '@react-native-assets/slider'.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Slider } from '@react-native-assets/slider';

const StyledSliderExample = () => {
  const [brightness, setBrightness] = useState(70);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Brightness: {brightness}%</Text>
      <Slider
        value={brightness}
        minimumValue={0}
        maximumValue={100}
        step={1}
        minimumTrackTintColor="#fbbf24"
        maximumTrackTintColor="#78716c"
        thumbTintColor="#f59e0b"
        trackHeight={8}
        thumbSize={28}
        thumbStyle={{
          borderWidth: 3,
          borderColor: '#fff',
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.3,
          shadowRadius: 4,
          elevation: 5
        }}
        trackStyle={{
          borderRadius: 4
        }}
        minTrackStyle={{
          backgroundColor: '#fcd34d',
          borderRadius: 4
        }}
        maxTrackStyle={{
          backgroundColor: '#a8a29e',
          borderRadius: 4,
          opacity: 0.5
        }}
        onValueChange={setBrightness}
        style={{ width: 320, height: 50, backgroundColor: '#f5f5f4', padding: 10 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  label: { fontSize: 18, marginBottom: 20, fontWeight: 'bold' }
});

```

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

### Custom Slider Track Rendering with CustomTrack Prop

Source: https://context7.com/sharcoux/slider/llms.txt

This example demonstrates how to customize the visual appearance of the slider's track using the `CustomTrack` prop. The `CustomTrack` prop accepts a React component that receives track properties like length, thickness, and orientation. This allows for unique styling, such as rendering a dashed track as shown. It utilizes React Native and the Slider component from '@react-native-assets/slider'.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Slider } from '@react-native-assets/slider';

const DashedTrack = ({ length, thickness, vertical, color, style }) => (
  <View
    style={[
          style,
          {
            borderStyle: 'dashed',
            borderTopWidth: vertical ? 0 : thickness,
            borderBottomWidth: vertical ? 0 : thickness,
            borderLeftWidth: vertical ? thickness : 0,
            borderRightWidth: vertical ? thickness : 0,
            borderColor: color,
            backgroundColor: 'transparent',
            [vertical ? 'width' : 'height']: 0
          }
        ]}
  />
);

const CustomTrackExample = () => {
  const [progress, setProgress] = useState(35);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Progress: {progress}%</Text>
      <Slider
        value={progress}
        minimumValue={0}
        maximumValue={100}
        step={1}
        minimumTrackTintColor="#06b6d4"
        maximumTrackTintColor="#e2e8f0"
        thumbTintColor="#0891b2"
        trackHeight={3}
        thumbSize={18}
        CustomTrack={DashedTrack}
        onValueChange={setProgress}
        style={{ width: 300, height: 40 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  label: { fontSize: 16, marginBottom: 15, fontWeight: '600' }
});

```

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

### Customize Range Slider Styles (JavaScript)

Source: https://context7.com/sharcoux/slider/llms.txt

This example shows how to customize the appearance of a RangeSlider component, allowing for distinct styling of the minimum, middle, and maximum track segments. It uses props such as `minTrackStyle`, `midTrackStyle`, and `maxTrackStyle` for segment-specific styling, alongside `thumbStyle` and `trackStyle` for common elements. This is useful for visually representing different states or ranges within a single slider. Dependencies include React, React Native core components, and the RangeSlider component from '@react-native-assets/slider'.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RangeSlider } from '@react-native-assets/slider';

const StyledRangeExample = () => {
  const [tempRange, setTempRange] = useState([18, 24]);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>
        Temperature: {tempRange[0]}°C - {tempRange[1]}°C
      </Text>
      <RangeSlider
        range={tempRange}
        minimumValue={10}
        maximumValue={30}
        step={0.5}
        minimumRange={2}
        outboundColor="#93c5fd"
        inboundColor="#ef4444"
        thumbTintColor="#dc2626"
        trackHeight={10}
        thumbSize={26}
        thumbStyle={{
          borderWidth: 2,
          borderColor: '#fff',
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.2,
          shadowRadius: 2,
          elevation: 3
        }}
        minTrackStyle={{
          backgroundColor: '#bfdbfe',
          borderTopLeftRadius: 5,
          borderBottomLeftRadius: 5
        }}
        midTrackStyle={{
          backgroundColor: '#f87171',
          borderRadius: 0
        }}
        maxTrackStyle={{
          backgroundColor: '#bfdbfe',
          borderTopRightRadius: 5,
          borderBottomRightRadius: 5
        }}
        onValueChange={setTempRange}
        style={{ width: 320, height: 50 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  label: { fontSize: 16, marginBottom: 15, fontWeight: '600' }
});

```

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

### Prevent Slider Value Changes with onValueChange Callback

Source: https://context7.com/sharcoux/slider/llms.txt

This example shows how to conditionally prevent the slider's value from updating. By returning `false` within the `onValueChange` callback, the slider's internal value will not change. This is useful for implementing validation logic or allowing updates only under certain conditions. It uses React Native and the Slider component from '@react-native-assets/slider'.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { Slider } from '@react-native-assets/slider';

const ConditionalSliderExample = () => {
  const [value, setValue] = useState(50);
  const [locked, setLocked] = useState(false);
  const [attemptedValue, setAttemptedValue] = useState(null);

  return (
    <View style={styles.container}>
      <Text style={styles.status}>
        Status: {locked ? 'LOCKED 🔒' : 'UNLOCKED 🔓'}
      </Text>
      <Text style={styles.value}>Current Value: {value}</Text>
      {attemptedValue !== null && (
        <Text style={styles.attempted}>Attempted: {attemptedValue}</Text>
      )}

      <Slider
        value={value}
        minimumValue={0}
        maximumValue={100}
        step={1}
        minimumTrackTintColor={locked ? '#9ca3af' : '#10b981'}
        maximumTrackTintColor="#e5e7eb"
        thumbTintColor={locked ? '#6b7280' : '#059669'}
        onValueChange={(newValue) => {
          setAttemptedValue(newValue);
          if (locked) {
            console.log('Blocked value change:', newValue);
            return false; // Prevent update
          }
          setValue(newValue);
          setAttemptedValue(null);
        }}
        style={{ width: 300, height: 40 }}
      />

      <Button
        title={locked ? 'Unlock Slider' : 'Lock Slider'}
        onPress={() => setLocked(!locked)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  status: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 },
  value: { fontSize: 16, marginBottom: 5 },
  attempted: { fontSize: 14, color: '#ef4444', marginBottom: 15 }
});

```

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

### Range Slider with Crossing Thumbs using React Native

Source: https://context7.com/sharcoux/slider/llms.txt

This example demonstrates a RangeSlider where the thumbs are allowed to cross each other. By setting the `crossingAllowed` prop to `true`, the slider automatically sorts the returned range array, ensuring it always maintains the correct minimum and maximum order. This is useful for scenarios where the order of selection doesn't matter as much as the final range. Dependencies include React, React Native core components, and the RangeSlider from '@react-native-assets/slider'.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RangeSlider } from '@react-native-assets/slider';

const CrossingRangeExample = () => {
  const [range, setRange] = useState([30, 70]);

  return (
    <View style={styles.container}>
      <Text style={styles.info}>Thumbs can cross each other</Text>
      <RangeSlider
        range={range}
        minimumValue={0}
        maximumValue={100}
        step={1}
        minimumRange={0}
        crossingAllowed={true}
        outboundColor="#fca5a5"
        inboundColor="#ef4444"
        thumbTintColor="#dc2626"
        trackHeight={5}
        thumbSize={20}
        onValueChange={(newRange) => {
          setRange(newRange);
          // Range is always sorted [min, max]
          console.log('Sorted range:', newRange);
        }}
        style={{ width: 300, height: 40 }}
      />
      <Text style={styles.result}>
        Range: [{range[0]}, {range[1]}]
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  info: { fontSize: 14, marginBottom: 15, color: '#6b7280' },
  result: { marginTop: 15, fontSize: 16, fontWeight: '500' }
});

```

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

### React Native Slider with Custom Thumb Component

Source: https://context7.com/sharcoux/slider/llms.txt

Demonstrates how to use a custom React component for the slider's thumb via the `CustomThumb` prop. This allows for highly personalized UI elements, such as displaying a formatted price value directly on the thumb.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Slider } from '@react-native-assets/slider';

const PriceThumb = ({ value }) => (
  <View style={styles.thumbContainer}>
    <Text style={styles.thumbText}>${value}</Text>
  </View>
);

const CustomThumbExample = () => {
  const [price, setPrice] = useState(25);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Select Price Range</Text>
      <Slider
        value={price}
        minimumValue={0}
        maximumValue={100}
        step={5}
        minimumTrackTintColor="#8b5cf6"
        maximumTrackTintColor="#e9d5ff"
        trackHeight={3}
        thumbSize={0}
        CustomThumb={PriceThumb}
        onValueChange={setPrice}
        style={{ width: 300, height: 50 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  label: { fontSize: 16, marginBottom: 10, fontWeight: '600' },
  thumbContainer: {
    backgroundColor: '#7c3aed',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  thumbText: { color: 'white', fontWeight: 'bold', fontSize: 14 }
});

```

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

### RangeSlider Component Configuration - JavaScript (React Native)

Source: https://context7.com/sharcoux/slider/llms.txt

Illustrates the usage of the RangeSlider component for selecting a range of values using two thumbs. It showcases how to set minimum and maximum values, step increments, and minimum range constraints. The component also allows for custom styling of track sections and control over thumb crossing.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RangeSlider } from '@react-native-assets/slider';

const RangeSliderExample = () => {
  const [range, setRange] = useState([20, 80]);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>
        Price Range: ${range[0]} - ${range[1]}
      </Text>
      <RangeSlider
        range={range}
        minimumValue={0}
        maximumValue={100}
        step={5}
        minimumRange={10}
        outboundColor="#cbd5e1"
        inboundColor="#3b82f6"
        thumbTintColor="#1e40af"
        trackHeight={6}
        thumbSize={22}
        slideOnTap={true}
        crossingAllowed={false}
        onValueChange={(newRange) => {
          setRange(newRange);
          console.log('Range changed:', newRange);
        }}
        onSlidingStart={(range) => console.log('Started sliding:', range)}
        onSlidingComplete={(range) => console.log('Finished sliding:', range)}
        style={styles.slider}
      />
      <View style={styles.info}>
        <Text>Min: ${range[0]}</Text>
        <Text>Max: ${range[1]}</Text>
        <Text>Spread: ${range[1] - range[0]}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  label: { fontSize: 16, marginBottom: 15, fontWeight: '600' },
  slider: { width: 320, height: 40 },
  info: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }
});
```

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

### Slider with Custom Step Markers - JavaScript (React Native)

Source: https://context7.com/sharcoux/slider/llms.txt

Demonstrates how to use the `StepMarker` prop of the Slider component to render custom components at each step. The custom marker component receives `currentValue` and `markValue` props to allow for conditional styling based on the slider's current position. This is useful for creating sliders with discrete, visually distinct steps.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Slider } from '@react-native-assets/slider';

const RatingMark = ({ currentValue, markValue }) => {
  const isActive = currentValue >= markValue;
  return (
    <View
      style={[
        styles.mark,
        { backgroundColor: isActive ? '#f59e0b' : '#d1d5db' }
      ]}
    />
  );
};

const StepMarkerExample = () => {
  const [rating, setRating] = useState(3);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rating: {rating} / 5</Text>
      <Slider
        value={rating}
        minimumValue={0}
        maximumValue={5}
        step={1}
        minimumTrackTintColor="#fbbf24"
        maximumTrackTintColor="#e5e7eb"
        thumbTintColor="#f59e0b"
        trackHeight={4}
        thumbSize={16}
        StepMarker={RatingMark}
        onValueChange={setRating}
        style={{ width: 300, height: 40 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  title: { fontSize: 18, marginBottom: 20, fontWeight: 'bold' },
  mark: { width: 3, height: 12, borderRadius: 1.5 }
});
```

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

### Basic Slider Usage in React Native

Source: https://github.com/sharcoux/slider/blob/master/README.md

This code snippet demonstrates how to import and use the Slider component from '@react-native-assets/slider'. It shows basic props like 'value', 'minimumValue', 'maximumValue', and 'onValueChange'. The slider component allows users to select a value within a specified range.

```javascript
import { Slider } from '@react-native-assets/slider'

<Slider
  value={0}                         // set the current slider's value
  minimumValue={0}                  // Minimum value (defaults as 0)
  maximumValue={0}                  // Maximum value (defaults as minimumValue + step)
  step={0}                          // The step for the slider (0 means that the slider will handle any decimal value within the range [min, max])
  minimumTrackTintColor='grey'      // The track color before the current value
  maximumTrackTintColor='grey'      // The track color after the current value
  thumbTintColor='darkcyan'         // The color of the slider's thumb
  thumbStyle={undefined}            // Override the thumb's style
  trackStyle={undefined}            // Override the tracks' style
  minTrackStyle={undefined}         // Override the tracks' style for the minimum range
  maxTrackStyle={undefined}         // Override the tracks' style for the maximum range
  vertical={false}                  // If true, the slider will be drawn vertically
  inverted={false}                  // If true, min value will be on the right, and max on the left
  enabled={true}                    // If false, the slider won't respond to touches anymore
  trackHeight={4}                   // The track's height in pixel
  thumbSize={15}                    // The thumb's size in pixel
  thumbImage={undefined}            // An image that would represent the thumb
  slideOnTap={true}                 // If true, touching the slider will update it's value. No need to slide the thumb.
  onValueChange={undefined}         // Called each time the value changed. Return false to prevent the value from being updated. The type is (value: number) => boolean | void
  onSlidingStart={undefined}        // Called when the slider is pressed. The type is (value: number) => void
  onSlidingComplete={undefined}     // Called when the press is released. The type is (value: number) => void
  CustomThumb={undefined}           // Provide your own component to render the thumb. The type is a component: ({ value: number }) => JSX.Element
  StepMarker={undefined}            // We now use the component from @callstack/slider to preserve the same API. See the documentation [here](https://github.com/callstack/react-native-slider?tab=readme-ov-file#stepmarker). We add "markValue" that holds the value of the current mark instead of the index only.
  CustomTrack={undefined}           // Provide your own component to render the track. The type is a component: ({ length: number; thickness: number; vertical: boolean; track: 'min' | 'max' ; style: RN.StyleProp<RN.ViewStyle>; color: RN.ColorValue }) => JSX.Element ; The props describe how the default system would expect the track to be rendered, but you can ignore them if you want to provide your own implementation
  {...props}                        // Add any View Props that will be applied to the container (style, ref, etc)
/>
```

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

### React Native Range Slider Component

Source: https://github.com/sharcoux/slider/blob/master/README.md

This snippet demonstrates the basic usage of the RangeSlider component from '@react-native-assets/slider'. It shows how to import and render the component with various customizable props such as range, step, colors, and styles. It also highlights event handlers for value changes.

```javascript
import { RangeSlider } from '@react-native-assets/slider'

<RangeSlider
  range={[0, 0]}                    // set the current slider's value
  step={0}                          // The step for the slider (0 means that the slider will handle any decimal value within the range [min, max])
  minimumRange={0}                  // Minimum range between the two thumbs (defaults as "step")
  minimumValue={0}                  // Minimum value (defaults as 0)
  maximumValue={0}                  // Maximum value (defaults as minimumValue + minimumRange)
  crossingAllowed={false}           // If true, the user can make one thumb cross over the second thumb
  outboundColor='grey'              // The track color outside the current range value
  inboundColor='grey'               // The track color inside the current range value
  thumbTintColor='darkcyan'         // The color of the slider's thumb
  thumbStyle={undefined}            // Override the thumb's style
  trackStyle={undefined}            // Override the tracks' style
  minTrackStyle={undefined}         // Override the tracks' style for the minimum range
  midTrackStyle={undefined}         // Override the tracks' style for the middle range
  maxTrackStyle={undefined}         // Override the tracks' style for the maximum range
  vertical={false}                  // If true, the slider will be drawn vertically
  inverted={false}                  // If true, min value will be on the right, and max on the left
  enabled={true}                    // If false, the slider won't respond to touches anymore
  trackHeight={4}                   // The track's height in pixel
  thumbSize={15}                    // The thumb's size in pixel
  thumbImage={undefined}            // An image that would represent the thumb
  slideOnTap={true}                 // If true, touching the slider will update it's value. No need to slide the thumb.
  onValueChange={undefined}         // Called each time the value changed. Return false to prevent the value from being updated. The type is (range: [number, number]) => boolean | void
  onSlidingStart={undefined}        // Called when the slider is pressed. The type is (range: [number, number]) => void
  onSlidingComplete={undefined}     // Called when the press is released. The type is (range: [number, number]) => void
  CustomThumb={undefined}           // Provide your own component to render the thumb. The type is a component: ({ value: number, thumb: 'min' | 'max' }) => JSX.Element
  StepMarker={undefined}            // We now use the component from @callstack/slider to preserve the same API. See the documentation [here](https://github.com/callstack/react-native-slider?tab=readme-ov-file#stepmarker). We add "markValue" that holds the value of the current mark instead of the index only.
  CustomTrack={undefined}           // Provide your own component to render the track. The type is a component: ({ length: number; thickness: number; vertical: boolean; track: 'min' | 'max' ; style: RN.StyleProp<RN.ViewStyle>; color: RN.ColorValue }) => JSX.Element ; The props describe how the default system would expect the track to be rendered, but you can ignore them if you want to provide your own implementation
  {...props}                        // Add any View Props that will be applied to the container (style, ref, etc)
/>
```

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

### Range Slider with Custom Thumbs using React Native

Source: https://context7.com/sharcoux/slider/llms.txt

This snippet demonstrates how to create a RangeSlider with custom thumb components. It utilizes the `CustomThumb` prop to render distinct UI elements for the minimum and maximum thumbs, displaying labels and values. The `RangeThumb` component receives value and thumb type ('min' or 'max') to customize appearance. Dependencies include React, React Native core components, and the RangeSlider from '@react-native-assets/slider'.

```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RangeSlider } from '@react-native-assets/slider';

const RangeThumb = ({ value, thumb }) => (
  <View style={[styles.thumb, thumb === 'min' ? styles.minThumb : styles.maxThumb]}>
    <Text style={styles.thumbLabel}>{thumb === 'min' ? 'MIN' : 'MAX'}</Text>
    <Text style={styles.thumbValue}>{value}</Text>
  </View>
);

const CustomRangeThumbExample = () => {
  const [ageRange, setAgeRange] = useState([25, 65]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Age Range Filter</Text>
      <RangeSlider
        range={ageRange}
        minimumValue={18}
        maximumValue={100}
        step={1}
        minimumRange={5}
        outboundColor="#e0e7ff"
        inboundColor="#6366f1"
        thumbSize={0}
        trackHeight={4}
        CustomThumb={RangeThumb}
        onValueChange={setAgeRange}
        style={{ width: 300, height: 60 }}
      />
      <Text style={styles.result}>
        Ages {ageRange[0]} to {ageRange[1]}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  title: { fontSize: 18, marginBottom: 20, fontWeight: 'bold' },
  thumb: {
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderRadius: 6,
    alignItems: 'center',
    minWidth: 50
  },
  minThumb: { backgroundColor: '#818cf8' },
  maxThumb: { backgroundColor: '#4f46e5' },
  thumbLabel: { fontSize: 10, color: 'white', fontWeight: '600' },
  thumbValue: { fontSize: 16, color: 'white', fontWeight: 'bold', marginTop: 2 },
  result: { marginTop: 20, fontSize: 16 }
});

```

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