CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-community--slider

React Native component used to select a single value from a range of values.

—

Pending
Overview
Eval results
Files

step-indicators.mddocs/

Step Indicators & Visual Markers

Advanced features for creating step-based sliders with custom markers, visual indicators, and step numbers for discrete value selection.

Capabilities

Step Marker Component

Custom component interface for rendering step indicators at specific slider positions.

interface MarkerProps {
  /**
   * Whether this step is currently selected/marked
   */
  stepMarked: boolean;
  
  /**
   * Current value of the slider
   */
  currentValue: number;
  
  /**
   * Index of this step marker
   */
  index: number;
  
  /**
   * Minimum value of the slider
   */
  min: number;
  
  /**
   * Maximum value of the slider
   */
  max: number;
}

interface SliderStepProps {
  /**
   * Component to be rendered for each step indicator.
   */
  StepMarker?: FC<MarkerProps>;
  
  /**
   * Whether to render step numbers.
   */
  renderStepNumber?: boolean;
}

Usage Examples:

import React from 'react';
import { View, Text } from 'react-native';
import Slider from '@react-native-community/slider';
import type { MarkerProps } from '@react-native-community/slider';

// Custom step marker component
const CustomStepMarker: React.FC<MarkerProps> = ({ 
  stepMarked, 
  currentValue, 
  index, 
  min, 
  max 
}) => {
  return (
    <View style={{
      width: 12,
      height: 12,
      borderRadius: 6,
      backgroundColor: stepMarked ? '#1fb28a' : '#d3d3d3',
      borderWidth: 2,
      borderColor: stepMarked ? '#ffffff' : '#999999',
    }} />
  );
};

// Slider with custom step markers
function StepMarkerSlider() {
  return (
    <Slider
      style={{width: 300, height: 40}}
      minimumValue={0}
      maximumValue={10}
      step={1}
      value={5}
      StepMarker={CustomStepMarker}
    />
  );
}

// Advanced step marker with labels
const LabeledStepMarker: React.FC<MarkerProps> = ({ 
  stepMarked, 
  currentValue, 
  index 
}) => {
  const labels = ['Min', 'Low', 'Med', 'High', 'Max'];
  const label = labels[Math.floor(index / 2.5)] || index.toString();
  
  return (
    <View style={{ alignItems: 'center' }}>
      <View style={{
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: stepMarked ? '#FF6B6B' : '#CCCCCC',
      }} />
      <Text style={{
        fontSize: 10,
        marginTop: 4,
        color: stepMarked ? '#FF6B6B' : '#666666',
      }}>
        {label}
      </Text>
    </View>
  );
};

function LabeledStepSlider() {
  return (
    <Slider
      style={{width: 280, height: 60}}
      minimumValue={0}
      maximumValue={10}
      step={2.5}
      value={5}
      StepMarker={LabeledStepMarker}
    />
  );
}

Step Numbers

Built-in step number rendering for displaying numeric values at step positions.

interface SliderStepNumberProps {
  /**
   * Whether to render step numbers.
   */
  renderStepNumber?: boolean;
}

Usage Examples:

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

// Slider with step numbers
function StepNumberSlider() {
  const [value, setValue] = useState(5);
  
  return (
    <Slider
      style={{width: 300, height: 50}}
      minimumValue={0}
      maximumValue={10}
      step={1}
      value={value}
      onValueChange={setValue}
      renderStepNumber={true}
    />
  );
}

// Rating slider with numbers
function RatingSlider() {
  const [rating, setRating] = useState(3);
  
  return (
    <View>
      <Text>Rating: {rating}/5</Text>
      <Slider
        style={{width: 250, height: 50}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        value={rating}
        onValueChange={setRating}
        renderStepNumber={true}
      />
    </View>
  );
}

Combined Step Features

Using both custom markers and step numbers together.

interface CombinedStepProps {
  StepMarker?: FC<MarkerProps>;
  renderStepNumber?: boolean;
}

Usage Examples:

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

// Star rating marker
const StarMarker: React.FC<MarkerProps> = ({ stepMarked }) => {
  return (
    <Text style={{
      fontSize: 20,
      color: stepMarked ? '#FFD700' : '#CCCCCC',
    }}>
      ★
    </Text>
  );
};

// Combined star markers with numbers
function StarRatingSlider() {
  const [rating, setRating] = useState(3);
  
  return (
    <View>
      <Text>Star Rating: {rating}/5</Text>
      <Slider
        style={{width: 250, height: 60}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        value={rating}
        onValueChange={setRating}
        StepMarker={StarMarker}
        renderStepNumber={true}
      />
    </View>
  );
}

Advanced Step Configurations

Complex step configurations with dynamic markers and conditional rendering.

Usage Examples:

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

// Dynamic step marker based on value ranges
const DynamicStepMarker: React.FC<MarkerProps> = ({ 
  stepMarked, 
  currentValue, 
  index, 
  min, 
  max 
}) => {
  const percentage = ((index - min) / (max - min)) * 100;
  let color = '#CCCCCC';
  
  if (stepMarked) {
    if (percentage < 25) color = '#FF4444';      // Red for low values
    else if (percentage < 50) color = '#FF8800'; // Orange
    else if (percentage < 75) color = '#FFDD00'; // Yellow
    else color = '#44FF44';                      // Green for high values
  }
  
  return (
    <View style={{
      width: 8 + (stepMarked ? 4 : 0),
      height: 8 + (stepMarked ? 4 : 0),
      borderRadius: 6,
      backgroundColor: color,
      borderWidth: stepMarked ? 2 : 1,
      borderColor: '#FFFFFF',
    }} />
  );
};

// Progress/level slider
function ProgressSlider() {
  const [progress, setProgress] = useState(50);
  
  const getProgressLabel = (value: number) => {
    if (value < 25) return 'Beginner';
    if (value < 50) return 'Intermediate';
    if (value < 75) return 'Advanced';
    return 'Expert';
  };
  
  return (
    <View>
      <Text>Progress: {progress}% - {getProgressLabel(progress)}</Text>
      <Slider
        style={{width: 300, height: 50}}
        minimumValue={0}
        maximumValue={100}
        step={10}
        value={progress}
        onValueChange={setProgress}
        StepMarker={DynamicStepMarker}
        renderStepNumber={true}
      />
    </View>
  );
}

Types

Step-Related Type Definitions

import type { FC } from 'react';

interface MarkerProps {
  stepMarked: boolean;
  currentValue: number;
  index: number;
  min: number;
  max: number;
}

interface TrackMarksProps {
  isTrue: boolean;
  index: number;
  thumbImage?: ImageURISource;
  StepMarker?: FC<MarkerProps>;
  currentValue: number;
  min: number;
  max: number;
}

interface SliderStepProps {
  StepMarker?: FC<MarkerProps>;
  renderStepNumber?: boolean;
}

Internal Component Types

// Internal component for rendering step indicators (not directly exported)
interface StepsIndicatorProps {
  options: number[];
  sliderWidth: number;
  currentValue: number;
  StepMarker?: FC<MarkerProps>;
  renderStepNumber?: boolean;
  thumbImage?: ImageURISource;
  isLTR?: boolean;
}

// Internal component for step numbers (not directly exported)
interface StepNumberProps {
  i: number;
  style: StyleProp<TextStyle>;
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native-community--slider

docs

accessibility-limits.md

core-component.md

index.md

platform-features.md

programmatic-control.md

step-indicators.md

tile.json