sharcoux-slider

You can pass custom React components to the Slider and RangeSlider to completely change their visual appearance.

CustomThumb

Receives the current value as a prop. Use this to render text, icons, or custom shapes as the slider handle.

CustomTrack

Receives thickness, vertical, color, and style as props. This allows you to define how the track line is drawn (e.g., dashed, solid, or specific widths).

StepMarker

For Slider, it receives currentValue and markValue. For RangeSlider, it receives currentValue (as [number, number]) and markValue. Use this to render visual indicators at specific intervals along the track.

// Example Custom Thumb
const CustomThumb = ({ value }) => {
  return <Text>{value}</Text>;
};

// Example Custom Step Marker for RangeSlider
const CustomRangeMark = ({ currentValue, markValue }: { currentValue: [number, number], markValue: number }) => {
  const backgroundColor = currentValue[0] > markValue ? 'red' : currentValue[1] < markValue ? 'blue' : 'orange';
  return <View style={{ backgroundColor, width: 2, height: 8, position: 'absolute', alignSelf: 'center' }} />;
};

The RangeSlider component provides a slider with two thumbs, allowing users to select a range between a minimum and maximum value.

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

<RangeSlider
  range={[0, 0]}                    // set the current slider's value
  step={0}                          // The step for the slider
  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, thumbs can cross over each other
  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 its value
  onValueChange={undefined}         // (range: [number, number]) => boolean | void. Return false to prevent update.
  onSlidingStart={undefined}        // (range: [number, number]) => void
  onSlidingComplete={undefined}     // (range: [number, number]) => void
  CustomThumb={undefined}           // ({ value: number, thumb: 'min' | 'max' }) => JSX.Element
  StepMarker={undefined}           // Component for marks (replaces CustomMark)
  CustomTrack={undefined}           // ({ length: number; thickness: number; vertical: boolean; track: 'min' | 'max' ; style: RN.StyleProp<RN.ViewStyle>; color: RN.ColorValue }) => JSX.Element
  {...props}                        // Standard View Props
/>

The Slider component provides a single-thumb slider. It is compatible with React Native and React Native Web and follows the same API as @react-native-community/slider.

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 any decimal value within [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 its value
  onValueChange={undefined}         // (value: number) => boolean | void. Return false to prevent update.
  onSlidingStart={undefined}        // (value: number) => void
  onSlidingComplete={undefined}     // (value: number) => void
  CustomThumb={undefined}           // ({ value: number }) => JSX.Element
  StepMarker={undefined}           // Component for marks (replaces CustomMark)
  CustomTrack={undefined}           // ({ length: number; thickness: number; vertical: boolean; track: 'min' | 'max' ; style: RN.StyleProp<RN.ViewStyle>; color: RN.ColorValue }) => JSX.Element
  {...props}                        // Standard View Props
/>

To customize the visual appearance of marks (ticks/labels) on the slider, you can provide a custom component via the StepMarker prop. This component receives several props to help it determine its state and position relative to the slider's current value.

CustomMarkType Props

When implementing a StepMarker, your component will receive the following props:

Note: The currentValue type depends on whether you are using a standard 'slider' or a 'range' slider.

import React from 'react';
import { CustomMarkType } from '@react-native-assets/slider';

// Example of a custom mark component
const MyCustomMark: CustomMarkType<'slider'> = ({ 
  stepMarked, 
  markValue, 
  currentValue 
}) => {
  return (
    <View style={{ 
      backgroundColor: stepMarked ? 'blue' : 'gray', 
      width: 10, 
      height: 10 
    }} />
  );
};

The RangeSlider component is a React Native component used to select a range of values between a minimum and maximum bound. It supports two thumbs (min and max), custom styling for tracks and thumbs, and custom component injection for thumbs, tracks, and step markers.

Key Props

Value and Bounds

• range: A tuple [number, number] representing the current selection.
• minimumValue: The lower bound of the slider (defaults to 0).
• maximumValue: The upper bound of the slider.
• step: The granularity of the slider movement.
• minimumRange: The minimum allowed distance between the two thumbs.
• crossingAllowed: Boolean indicating if the thumbs can cross each other (defaults to false).

Styling

• trackHeight: The thickness of the slider track.
• thumbSize: The size of the thumbs.
• outboundColor: Color for the track segments outside the selected range.
• inboundColor: Color for the track segment inside the selected range.
• thumbTintColor: Color for the thumbs.
• trackStyle: Base style for all track segments.
• minTrackStyle, midTrackStyle, maxTrackStyle: Specific styles for the three track segments (min, mid, and max).
• thumbStyle: Style for the thumbs.

Interaction

• enabled: Whether the slider is interactive.
• slideOnTap: If true, tapping the track moves the nearest thumb to that position.
• onValueChange: Callback triggered when the range changes: (range: [number, number]) => boolean | void.
• onSlidingStart: Callback triggered when the user starts dragging a thumb.
• onSlidingComplete: Callback triggered when the user releases a thumb.

Customization (Component Injection)

• CustomThumb: A component to replace the default thumb. Receives value and thumb ('min' | 'max') as props.
• CustomTrack: A component to replace the default track. Receives length, thickness, vertical, track ('min' | 'mid' | 'max'), style, and color as props.
• StepMarker: A component to render marks/steps along the track.

import RangeSlider from '@react-native-assets/slider';

<RangeSlider
  range={[20, 80]}
  minimumValue={0}
  maximumValue={100}
  step={5}
  inboundColor="blue"
  outboundColor="grey"
  onValueChange={(range) => {
    console.log('New range:', range);
  }}
/>

The Slider component is a React Native component used to select a value from a range. It supports customization of the thumb, track, and marks, and provides callbacks for value changes and sliding lifecycle events.

Core Props

Styling and Appearance

import Slider from './Slider';

<Slider
  minimumValue={0}
  maximumValue={100}
  step={1}
  value={50}
  onValueChange={(value) => console.log(value)}
  thumbTintColor="red"
  trackHeight={10}
/>

You can extend the RangeSlider by providing custom components via the following props:

CustomThumb

Pass a component to CustomThumb to change the look of the handles. Props received by your component:

• value: The current numeric value of the thumb.
• thumb: Either 'min' or 'max'.

CustomTrack

Pass a component to CustomTrack to change the track rendering. Props received by your component:

• length: The percentage length of the segment.
• thickness: The height/width of the track.
• vertical: Boolean indicating if the slider is vertical.
• track: The segment type: 'min', 'mid', or 'max'.
• style: The applied style.
• color: The applied color.

StepMarker

Pass a component to StepMarker to render custom marks at specific intervals along the slider.

const MyCustomThumb = ({ value, thumb }: { value: number; thumb: 'min' | 'max' }) => (
  <View style={{ width: 20, height: 20, backgroundColor: 'red', borderRadius: 10 }} />
);

<RangeSlider
  range={[20, 80]}
  CustomThumb={MyCustomThumb}
/>