Компоненты/Диапазон

Диапазон

Pro
21 августа 2026

Бегунок диапазона с двумя ручками, ведомый жестами

Установка

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";

Установка через CLIPro

Команда станет доступна после оформления Pro.

Оформить ProВойти

Файлы

index.tsx
НазадСияющая кнопкаДалееРеакции дугой

Вручную

Поставьте зависимости:

npm install react-native-gesture-handler react-native-reanimated react-native-worklets
pnpm add react-native-gesture-handler react-native-reanimated react-native-worklets
yarn add react-native-gesture-handler react-native-reanimated react-native-worklets
bun add react-native-gesture-handler react-native-reanimated react-native-worklets

Скопируйте эти файлы в src/shared/components/molecules/range-slider/:

index.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface RangeSliderProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function RangeSlider({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: RangeSliderProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Диапазон» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Проверьте алиас путей. Импорты в коде выше записаны так, как их пишет astra-rn add: @/shared/components, @/shared/utils и @/shared/hooks. Нужен алиас "@/*": ["./src/*"] в tsconfig.json — или поправьте импорты под свои пути.

Использование

usage.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface RangeSliderProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function RangeSlider({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: RangeSliderProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Диапазон» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Пропсы

Пропс
Описание
value?

Тип number

defaultValue?

Тип number

onValueChange?

Тип (value: number) => void

min?

Тип number

max?

Тип number

step?

Тип number

showTicks?

Тип boolean

disabled?

Тип boolean

trackColor?

Тип string

fillColor?

Тип string

thumbColor?

Тип string

tickColor?

Тип string

style?

Тип StyleProp<ViewStyle>

accessibilityLabel?

Тип string