Component

Slider

Gesture-driven slider for numeric range input.

React Native

Slider

Show the current value near the control.

Value: 60

import { useState } from 'react';
import { View } from 'react-native';
import { Slider, Text, useTheme } from '@sohantalukder/rn-kit';

export function BudgetSlider() {
  const [budget, setBudget] = useState(50);
  const { gutters } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <Text weight="semibold">Budget: {budget}</Text>
      <Slider
        min={0}
        max={100}
        initialValue={budget}
        value={budget}
        onValueChange={setBudget}
      />
    </View>
  );
}

Live component

defaultsteppeddisabled

Show the selected value near the control.
Use steps for financial or count inputs.

Usage

import { Slider } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { View } from 'react-native';
import { Slider, Text, useTheme } from '@sohantalukder/rn-kit';

export function BudgetSlider() {
  const [budget, setBudget] = useState(50);
  const { gutters } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <Text weight="semibold">Budget: {budget}</Text>
      <Slider
        min={0}
        max={100}
        initialValue={budget}
        value={budget}
        onValueChange={setBudget}
      />
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

minnumber0Minimum value allowed by the slider.

maxnumber100Maximum value allowed by the slider.

initialValueunknown-Configures initial value for Slider.

valuestring | number | boolean-Controlled value rendered by the input or control.

onValueChange(value: number) => void-Called as the slider value changes.

Theme

Slider reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
stepped
disabled

Best Practices

Show the selected value near the control.
Use steps for financial or count inputs.