Thumb и кастомизация

В библиотеке Radix UI компонент Thumb является ключевым элементом для создания пользовательских ползунков (Slider), диапазонов (RangeSlider) и других элементов управления, где требуется интерактивная ручка для изменения значения. Thumb представляет собой визуальный индикатор, который можно перемещать, а также полностью настраивать под дизайн приложения.

Основная структура Thumb

Thumb в Radix UI всегда является дочерним элементом компонента Slider. Его базовая структура выглядит следующим образом:

import * as Slider from '@radix-ui/react-slider';

<Slider.Root defaultValue={[50]} max={100} step={1}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
  • Slider.Root – корневой контейнер с настройками слайдера.
  • Slider.Track – дорожка, по которой перемещается Thumb.
  • Slider.Range – визуальное выделение диапазона.
  • Slider.Thumb – интерактивная ручка.

Кастомизация Thumb через стили

Основной способ изменить внешний вид Thumb — использование CSS. Radix UI не накладывает строгих ограничений на стили, что позволяет полностью контролировать его визуализацию.

.slider-thumb {
  width: 24px;
  height: 24px;
  background-color: #4f46e5;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.slider-thumb:hover {
  transform: scale(1.1);
}

.slider-thumb:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
<Slider.Thumb className="slider-thumb" />

Ключевые моменты кастомизации:

  • Размер и форма: ширина и высота, скругления, форма (круг, квадрат, кастомные SVG).
  • Цвет и фон: можно задавать градиенты, текстуры или динамически менять цвет в зависимости от значения слайдера.
  • Эффекты при взаимодействии: hover, active, focus состояния для улучшения UX.
  • Анимации: масштабирование, плавное перемещение и тени создают ощущение глубины.

Доступность и управление фокусом

Thumb автоматически поддерживает клавиатурное управление (ArrowLeft, ArrowRight, ArrowUp, ArrowDown) и фокус, что делает его доступным для пользователей с клавиатурой. Для улучшения UX можно добавлять собственные визуальные индикаторы фокуса:

.slider-thumb:focus-visible {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3);
}

Thumb с кастомными элементами

Radix UI позволяет заменять стандартный элемент Thumb на собственный компонент, включая иконки или SVG:

<Slider.Thumb>
  <svg width="24" height="24" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" fill="#4f46e5" />
  </svg>
</Slider.Thumb>
  • Можно использовать анимации внутри SVG.
  • Взаимодействие и фокус сохраняются автоматически.

Кастомизация через стилизованные компоненты

Для интеграции с библиотеками вроде styled-components или @stitches/react Thumb можно оформить как полностью стилизованный компонент:

import { styled } from '@stitches/react';
import * as Slider from '@radix-ui/react-slider';

const StyledThumb = styled(Slider.Thumb, {
  width: 20,
  height: 20,
  borderRadius: '50%',
  backgroundColor: '#4f46e5',
  boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
  '&:hover': { transform: 'scale(1.1)' },
  '&:focus': { outline: '2px solid #6366f1' },
});

<Slider.Root defaultValue={[50]} max={100}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <StyledThumb />
</Slider.Root>

Динамическая кастомизация

Thumb может изменять стиль в зависимости от состояния слайдера. Например, цвет может отражать текущее значение:

<Slider.Thumb
  style={{
    backgroundColor: value > 50 ? '#10b981' : '#ef4444',
  }}
/>

Это позволяет создавать интерактивные индикаторы прогресса или состояния, визуально отражающие значения.

Поддержка нескольких Thumb

Компонент Slider может содержать несколько Thumb для создания диапазонов:

<Slider.Root defaultValue={[20, 80]} max={100} step={1}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Thumb />
</Slider.Root>
  • Каждый Thumb индивидуально управляется клавиатурой и мышью.
  • Стили можно задавать одинаковые или разные для каждого Thumb.

Интеграция с анимациями

Для плавных эффектов перемещения можно подключать библиотеки анимации, например framer-motion:

import { motion } from 'framer-motion';

<Slider.Thumb asChild>
  <motion.div
    style={{ width: 24, height: 24, borderRadius: '50%', backgroundColor: '#4f46e5' }}
    whileHover={{ scale: 1.2 }}
    whileTap={{ scale: 0.9 }}
  />
</Slider.Thumb>
  • Radix UI обеспечивает управление событиями и доступность, а анимации выполняются на пользовательском элементе Thumb.

Итог по кастомизации Thumb

  • Полностью стилизуемый и интерактивный компонент.
  • Поддерживает доступность и клавиатурное управление.
  • Позволяет использовать кастомные элементы, SVG, иконки и анимации.
  • Можно динамически менять стиль в зависимости от состояния слайдера.
  • Поддержка множественных Thumb для диапазонных значений.

Thumb в Radix UI — это гибкий строительный блок, который сочетает простоту управления и возможность полной визуальной кастомизации, что делает его идеальным для сложных и современных интерфейсов.

Оглавление