Inputs

Price Histogram

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

range
slider
histogram
filter

Превью

1440pxHost theme

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

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

размести это в шапке: https://vibeui.ru/c/range-002

Цена за ночь3 000 — 11 000 ₽

0 ₽Подходит вариантов: 36016 000 ₽

Подпись

Шаг

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

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

# Установка и размещение «range-002» (Price Histogram) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/range-002.json

Registry item: https://vibeui.ru/r/range-002.json
Ставится в: components/vibeui/range-002.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

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

Двойной ползунок цены с гистограммой распределения и счётчиком подходящих вариантов. Ноль зависимостей, один файл.

## 3. Как использовать
import { Range002 } from "@/components/vibeui/range-002"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-range-002-* и не подменять её токенами вашей темы
- собственную светлую подложку: фильтр показывают поверх любого фона
- гистограмму рядом со шкалой: без плотности предложений диапазон не говорит ничего о рынке
- приглушение столбиков вне отрезка: видно не только выбранное, но и отсечённое
- pointer-events на ручках при отключённой дорожке: иначе верхний ползунок съедает все клики
- упор границ друг в друга: «от» больше «до» превращает фильтр в пустую выдачу
- aria-label на обоих ползунках: два одинаковых range без подписей неразличимы

## 6. Можно менять
- label — подпись фильтра
- min, max, step и стартовые defaultFrom и defaultTo
- histogram — сами данные распределения
- unit — знак валюты
- акцент через проп accent

## 7. Правила
- Гистограмма должна приходить с сервера вместе с выдачей: выдуманные столбики обманывают сильнее, чем их отсутствие.
- Корзины считаются равными по ширине: для логарифмической шкалы формулу надо менять.
- Счётчик вариантов складывается по пересечению корзин с отрезком — это оценка, а не точное число.
- Не выносите CSS-переменные в globals.css: компонент обязан остаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

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

npx shadcn@latest add https://vibeui.ru/r/range-002.json

https://vibeui.ru/r/range-002.json

Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных переменных --vibeui-range-002-*. Клиентский: обе границы в состоянии. Диапазон собран двумя нативными ползунками, лежащими друг на друге: дорожка отключена для событий, а ручки — нет, поэтому обе доступны мышью. Над дорожкой стоит гистограмма: столбики вне выбранного отрезка приглушены, а число подходящих вариантов пересчитывается по тем же корзинам, что и рисуются. Данные гистограммы приходят пропом — рисовать её случайными числами нельзя, она обязана соответствовать выдаче.

Исходник компонента

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

"use client"

import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Range002Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "defaultValue" | "onChange"
> & {
  label?: string
  min?: number
  max?: number
  step?: number
  defaultFrom?: number
  defaultTo?: number
  histogram?: number[]
  unit?: string
  accent?: string
}

// Идея компонента: над ползунком стоит гистограмма предложений. Голый диапазон
// цен ничего не говорит о рынке: выбрав «до 5 000», пользователь не знает, что
// под этот фильтр попадают три товара из тысячи. Столбики вне выбранного
// отрезка приглушены, поэтому видно и то, что отсекли. Гистограмма считается
// снаружи и приходит массивом: рисовать её по случайным числам нельзя — она
// обязана соответствовать выдаче.
const STYLES = `
:where([data-vibeui-block="range-002"]){
--vibeui-range-002-surface:oklch(1 0 0);
--vibeui-range-002-shell:oklch(0.9 0.006 265);
--vibeui-range-002-fg:oklch(0.23 0.014 265);
--vibeui-range-002-muted:oklch(0.55 0.014 265);
--vibeui-range-002-track:oklch(0.93 0.006 265);
--vibeui-range-002-accent:oklch(0.55 0.19 275);
--vibeui-range-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--vibeui-range-002-from:0%;
--vibeui-range-002-to:100%;
}
/* Своя светлая подложка: фильтр показывают поверх любого фона. */
[data-vibeui-block="range-002"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:21rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-range-002-surface);
border:1px solid var(--vibeui-range-002-shell);border-radius:0.875rem;
font-family:var(--vibeui-range-002-font);color:var(--vibeui-range-002-fg);
}
[data-vibeui-block="range-002"] [data-part="head"]{
display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;margin:0;
font-size:0.8125rem;
}
[data-vibeui-block="range-002"] [data-part="value"]{font-weight:700;font-variant-numeric:tabular-nums}
/* Гистограмма: диапазон без плотности предложений ничего не говорит о рынке. */
[data-vibeui-block="range-002"] [data-part="chart"]{
display:flex;align-items:flex-end;gap:0.0625rem;height:3rem;
}
[data-vibeui-block="range-002"] [data-part="bar"]{
flex:1 1 0;border-radius:0.125rem 0.125rem 0 0;
background:var(--vibeui-range-002-track);
transition:background-color .16s ease;
}
[data-vibeui-block="range-002"] [data-part="bar"][data-in="true"]{background:var(--vibeui-range-002-accent)}
[data-vibeui-block="range-002"] [data-part="rail"]{position:relative;height:1.25rem}
[data-vibeui-block="range-002"] [data-part="rail"]::before{
content:"";position:absolute;left:0;right:0;top:0.4375rem;height:0.375rem;border-radius:9999px;
background:linear-gradient(to right,
var(--vibeui-range-002-track) var(--vibeui-range-002-from),
var(--vibeui-range-002-accent) var(--vibeui-range-002-from),
var(--vibeui-range-002-accent) var(--vibeui-range-002-to),
var(--vibeui-range-002-track) var(--vibeui-range-002-to));
}
[data-vibeui-block="range-002"] input{
position:absolute;left:0;top:0;width:100%;height:1.25rem;margin:0;
appearance:none;background:none;pointer-events:none;
}
[data-vibeui-block="range-002"] input::-webkit-slider-runnable-track{background:none;height:0.375rem}
[data-vibeui-block="range-002"] input::-moz-range-track{background:none;height:0.375rem}
/* Дорожка событий не ловит, ручки ловят: иначе верхний ползунок съедает клики. */
[data-vibeui-block="range-002"] input::-webkit-slider-thumb{
appearance:none;pointer-events:auto;cursor:pointer;margin-top:-0.3125rem;
width:1rem;height:1rem;border-radius:9999px;
background:var(--vibeui-range-002-surface);border:2px solid var(--vibeui-range-002-accent);
box-shadow:0 1px 3px oklch(0.2 0.02 265 / 25%);
}
[data-vibeui-block="range-002"] input::-moz-range-thumb{
pointer-events:auto;cursor:pointer;box-sizing:border-box;
width:1rem;height:1rem;border-radius:9999px;
background:var(--vibeui-range-002-surface);border:2px solid var(--vibeui-range-002-accent);
}
[data-vibeui-block="range-002"] input:focus-visible{outline:2px solid var(--vibeui-range-002-accent);outline-offset:4px;border-radius:0.5rem}
[data-vibeui-block="range-002"] [data-part="foot"]{
display:flex;justify-content:space-between;gap:0.75rem;margin:0;
font-size:0.6875rem;color:var(--vibeui-range-002-muted);font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="range-002"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_HISTOGRAM = [
  4, 9, 17, 28, 41, 55, 62, 58, 47, 39, 30, 24, 18, 12, 7, 3,
]

/**
 * Диапазон цены с гистограммой предложений: вне отрезка столбики приглушены.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Range002({
  label = "Цена за ночь",
  min = 0,
  max = 16000,
  step = 500,
  defaultFrom = 3000,
  defaultTo = 11000,
  histogram = DEFAULT_HISTOGRAM,
  unit = "₽",
  accent,
  className,
  style,
  ...props
}: Range002Props) {
  const [from, setFrom] = useState(defaultFrom)
  const [to, setTo] = useState(defaultTo)
  const peak = Math.max(...histogram, 1)
  const span = max - min || 1
  const percent = (value: number) => `${((value - min) / span) * 100}%`
  const inside = histogram.reduce((sum, amount, index) => {
    const start = min + (span / histogram.length) * index
    const end = start + span / histogram.length
    return end > from && start < to ? sum + amount : sum
  }, 0)

  const palette = {
    "--vibeui-range-002-from": percent(from),
    "--vibeui-range-002-to": percent(to),
    ...(accent ? { "--vibeui-range-002-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-range-002" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="range-002"
        className={className}
        style={palette}
      >
        <p data-part="head">
          {label}
          <span data-part="value">
            {from.toLocaleString("ru-RU")} — {to.toLocaleString("ru-RU")} {unit}
          </span>
        </p>
        <div data-part="chart" aria-hidden="true">
          {histogram.map((amount, index) => {
            const start = min + (span / histogram.length) * index
            const end = start + span / histogram.length
            return (
              <span
                key={start}
                data-part="bar"
                data-in={end > from && start < to}
                style={{ height: `${Math.max(6, (amount / peak) * 100)}%` }}
              />
            )
          })}
        </div>
        <div data-part="rail">
          <input
            type="range"
            min={min}
            max={max}
            step={step}
            value={from}
            aria-label={`${label}: от`}
            onChange={(event) =>
              setFrom(Math.min(Number(event.target.value), to - step))
            }
          />
          <input
            type="range"
            min={min}
            max={max}
            step={step}
            value={to}
            aria-label={`${label}: до`}
            onChange={(event) =>
              setTo(Math.max(Number(event.target.value), from + step))
            }
          />
        </div>
        <p data-part="foot" aria-live="polite">
          <span>
            {min.toLocaleString("ru-RU")} {unit}
          </span>
          <span>Подходит вариантов: {inside}</span>
          <span>
            {max.toLocaleString("ru-RU")} {unit}
          </span>
        </p>
      </div>
    </>
  )
}