スライダー・レンジ（Slider / Range）
数値や範囲をドラッグ操作で入力するUIコンポーネント。音量・価格フィルター・明るさ調整など幅広い用途で使われる。
このページでは、Mantine・Ant Design・shadcn/ui・MUIを使ったスライダー（Slider / RangeSlider）の実装パターンをインタラクティブなデモとコードで確認できます。
Mantine Slider / RangeSlider
Mantineが提供するスライダーコンポーネント。単一値は Slider、範囲選択は RangeSlider と別コンポーネントで意図が明確に分かれている。marks プロパティで目盛りラベルを簡単に追加でき、MantineProvider 内に配置するだけで使用できる。
Slider / RangeSlidermarks プロパティMantineProvider学習コスト低
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { MantineProvider, Slider, RangeSlider, Stack, Text } from '@mantine/core';
import '@mantine/core/styles.css';
export default function MantineSliderDemo() {
const [val, setVal] = useState(50);
const [range, setRange] = useState<[number, number]>([200, 800]);
return (
<MantineProvider>
<Stack gap="xl" p="md">
<div>
<Text size="xs" c="dimmed" fw={600} mb={12}>基本スライダー</Text>
<Slider value={val} onChange={setVal} min={0} max={100} />
<Text size="xs" c="dimmed" mt={8}>現在値: {val}</Text>
</div>
<div>
<Text size="xs" c="dimmed" fw={600} mb={12}>レンジスライダー（価格フィルター）</Text>
<RangeSlider value={range} onChange={setRange} min={0} max={1000} />
<Text size="xs" c="dimmed" mt={8}>
範囲: ¥{range[0].toLocaleString()} 〜 ¥{range[1].toLocaleString()}
</Text>
</div>
<div>
<Text size="xs" c="dimmed" fw={600} mb={24}>ステップ付き（step=25・マーク表示）</Text>
<Slider
step={25}
marks={[
{ value: 0, label: '0' },
{ value: 25, label: '25' },
{ value: 50, label: '50' },
{ value: 75, label: '75' },
{ value: 100, label: '100' },
]}
/>
</div>
<div>
<Text size="xs" c="dimmed" fw={600} mb={12}>無効状態（disabled）</Text>
<Slider disabled defaultValue={40} />
</div>
</Stack>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったスライダーを実装してください。 - 使用コンポーネント: @mantine/core の Slider（単一値）・RangeSlider（範囲選択） - 単一スライダー: min=0 max=100 step=1、現在値をリアルタイム表示 - レンジスライダー: min=0 max=1000、価格フィルターを想定 - ステップ付き: step=25、marks で目盛りラベルを表示 - disabled 状態のスライダーも追加
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| ライブラリ | 単一値 | レンジ | マーク表示 | カスタマイズ性 | 学習コスト |
|---|---|---|---|---|---|
| Mantine | Slider | RangeSlider（別コンポーネント） | marks プロパティ | 高 | 低 |
| Ant Design | Slider | range プロパティ | marks オブジェクト | 中 | 低 |
| shadcn/ui | Slider | 配列で2値を渡す | 手動配置 | 非常に高 | 中 |
| MUI | Slider | 配列で2値を渡す | marks 配列 | 高 | 中 |
選択のポイント
- Mantine —
SliderとRangeSliderが分かれており意図が明確。marksも簡単に追加でき、 最もシンプルに使える。Mantine を採用しているプロジェクトなら一択。 - Ant Design —
rangeプロパティ一つで切り替えられるシンプルさが特徴。 管理画面・ダッシュボードとの相性がよく、フォームへの組み込みも容易。 - shadcn/ui — Radix UI ベースで完全なアクセシビリティ対応。コードが手元にあるためスタイルを自由にカスタマイズしたい場合に最適。 デザインシステムを独自に設計しているプロジェクト向き。
- MUI — Material Design に準拠した見た目が必要な場合。
valueLabelDisplayでツールチップ表示なども手軽に追加できる。 エンタープライズ向けダッシュボードで MUI を統一採用している場合は自然な選択。
スライダーは、数値範囲をドラッグ操作で入力するUIコンポーネント。直感的な操作性と視覚的なフィードバックを兼ね備え、連続した値の入力に適している。
音量調整・明るさ設定・価格フィルター・年齢範囲の絞り込みなど、連続した数値入力が必要なあらゆる場面で使われる。
主なバリエーション
- •基本スライダー（単一値）
- •レンジスライダー（2値選択）
- •ステップ付きスライダー
- •マーク（目盛り）付きスライダー
- •ツールチップ付きスライダー
Zenn