VibeUI
РусEng
Войти

Слайдеры

Голый ползунок

Ползунок без рамки и подписи: дорожка с закрашенной частью и кольцо-ручка на цвете подложки. Управляемый снаружи — цифру, деления и итог рисует блок вокруг: калькулятор цены, выбор мест, лимит запросов.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • value, min, max и step
  • surface — цвет ручки под подложку блока
  • glow — неоновое свечение для тёмных блоков

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Голый ползунок — Ползунок без рамки и подписи: дорожка с закрашенной частью и кольцо-ручка на цвете подложки. Управляемый снаружи — цифру, деления и итог рисует блок вокруг: калькулятор цены, выбор мест, лимит запросов.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/slider-013?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Slider013 value={seats} min={1} max={50} onChange={setSeats} aria-label="Места" />

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Свечение
glow · по умолчанию: выключено
surface
surface
Акцент
accent · по умолчанию: цвет темы

Используется в блоках

Похожие по стилю и содержимому

Варианты из той же категории с общими тегами или похожей формой контента.

  • Ползунок значения

    Ползунок на нативном range: перетаскивание, касания и клавиатура достаются от браузера, а цифра стоит рядом с подписью.

  • Диапазон цены

    Диапазон двумя нативными ползунками: границы упираются друг в друга, поэтому «от» никогда не становится больше «до».

  • Гистограмма цен

    Диапазон цены с гистограммой предложений: голая шкала не говорит, что под фильтр «до 5 000» попадают три варианта из тысячи.

Ещё в разделе «Слайдеры»

Частые вопросы

Как установить компонент «Голый ползунок» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Голый ползунок»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Голый ползунок»?
Можно менять: value, min, max и step; surface — цвет ручки под подложку блока; glow — неоновое свечение для тёмных блоков. Сохранить как есть: локальную палитру --vibeui-slider-013-* и не подменять её токенами вашей темы; нативный input[type=range]: перетаскивание, касания и стрелки достаются даром; управляемость: value и onChange приходят снаружи, у компонента нет своего состояния.
Компонент «Голый ползунок» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/slider-013.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-slider-013-*. Клиентский: "use client" ради onChange. Управляемый: value и onChange обязаны прийти снаружи, состояние держит блок. Корень — сам input[type=range], поэтому ширину и отступы ему задаёт контейнер. Пройденная часть дорожки закрашена градиентом по проценту (--vibeui-slider-013-fill). Проп surface — цвет ручки внутри кольца: блок передаёт свою подложку, чтобы кольцо стояло на «своём» фоне. Проп glow включает неоновое свечение дорожки и ручки для тёмных блоков.

Теги

  • slider
  • range
  • bare
  • controlled
  • calculator
  • form
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…