RangeSlider

2 つのつまみで範囲を選ぶスライダー

インポート

ts
import { RangeSlider } from '@k8ordo/ui';

使い方

tsx
<RangeSlider aria-label="Price" defaultValue={[20, 80]} />

制御モード

18–26 °C

tsx
const [value, setValue] = useState<readonly [number, number]>([18, 26]);

<RangeSlider
  aria-label="Temperature"
  max={40}
  min={0}
  onChange={setValue}
  value={value}
/>

無効

tsx
<RangeSlider aria-label="Price" defaultValue={[20, 80]} disabled />

フォームで使う

つまみはそれぞれ本物の <input type="range"> で、name の組の 2 つの欄として送られます。非制御のときは値を DOM に持つので、フォームの reset と変更の有無の判定がそのまま効きます。

tsx
// schema.ts
export const filterSchema = z.object({
  priceMin: z.coerce.number().int().min(0).max(100),
  priceMax: z.coerce.number().int().min(0).max(100),
});

// filter-form.tsx
const priceMin = form.field('priceMin');
const priceMax = form.field('priceMax');

<FormControl
  label="Price"
  renderInput={(props) => (
    <RangeSlider
      {...props}
      defaultValue={[20, 80]}
      max={100}
      min={0}
      name={[priceMin.input.name, priceMax.input.name]}
    />
  )}
/>

Props

defaultValue?
Type: readonly [number, number]
Default: -
disabled?
Type: boolean
Default: false
invalid?
Type: boolean
Default: false
max?
Type: number
Default: 100
min?
Type: number
Default: 0
name?
Type: readonly [string, string]
Default: -
onChange?
Type: (value: [number, number]) => void
Default: -
ref?
Type: Ref<HTMLDivElement>
Default: -
required?
Type: boolean
Default: false
step?
Type: number
Default: 1
value?
Type: readonly [number, number]
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components