Radix Vue

外観

Slider ​

指定された範囲内からユーザーが値を選択する入力。
vue
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'

const sliderValue = ref([50])
</script>

<template>
  <SliderRoot
    v-model="sliderValue"
    class="relative flex items-center select-none touch-none w-[200px] h-5"
    :max="100"
    :step="1"
  >
    <SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
      <SliderRange class="absolute bg-white rounded-full h-full" />
    </SliderTrack>
    <SliderThumb
      class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
      aria-label="Volume"
    />
  </SliderRoot>
</template>

機能 ​

  • 制御または非制御にすることができます。
  • 複数のサムをサポートします。
  • サム間に最小値をサポートします。
  • 右から左への方向に対応しています。
  • 完全キーボードナビゲーション。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

アナトミー ​

すべてのパーツをインポートして、組み合わせてください。

vue
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
</script>

<template>
  <SliderRoot>
    <SliderTrack>
      <SliderRange />
    </SliderTrack>
    <SliderThumb />
  </SliderRoot>
</template>

API リファレンス ​

ルート ​

スライダーのすべてのパーツが含まれます。form 内で使用される場合、各サム用の input をレンダリングし、イベントが正しく伝播されるようにします。

プロパティ既定値タイプ
as
'div'
AsTag | Component

このコンポーネントがレンダリングする要素またはコンポーネント。asChild で上書きできます。

asChild
boolean

子として渡されたデフォルトのレンダリングされた要素を変更し、それらのプロパティと動作をマージします。

Composition ガイドの詳細については、こちらを参照してください。

defaultValue
[0]
number[]

最初にレンダリングされたときの、スライダーの値。スライダーの状態を制御する必要がない場合に使用します。

dir
'ltr' | 'rtl'

適用可能な場合、コンボボックスの読み取り方向。
省略された場合は、ConfigProvider からグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
false
boolean

true の場合、ユーザーがスライダーと対話できないようにします。

inverted
false
boolean

スライダーが視覚的に反転されているかどうか。

max
100
number

範囲の最大値。

min
0
number

範囲の最小値。

minStepsBetweenThumbs
0
number

複数のサムの間で許可される最小のステップ。

modelValue
number[]

スライダーの制御値。v-model としてバインドできます。

name
string
orientation
'horizontal'
'vertical' | 'horizontal'

スライダーの向き。

step
1
number

ステップ間隔。

Emitペイロード
update:modelValue
[payload: number[]]

スライダーの値が変更されたときに呼び出されるイベントハンドラー

valueCommit
[payload: number[]]

値が操作の最後に変更されたときに呼び出されるイベントハンドラー。

バックエンドサービスを更新するなど、最終値のみをキャプチャする必要がある場合に役立ちます。

スロット（デフォルト）ペイロード
modelValue
number[]

現在のスライダーの値

データ属性値
[data-disabled]無効になっている場合に表示されます。
[data-orientation]"vertical" | "horizontal"

トラック ​

SliderRange を含むトラック。

プロパティ既定値タイプ
as
'span'
AsTag | Component

このコンポーネントがレンダリングする要素またはコンポーネント。asChild で上書きできます。

asChild
boolean

子として渡されたデフォルトのレンダリングされた要素を変更し、それらのプロパティと動作をマージします。

Composition ガイドの詳細については、こちらを参照してください。

データ属性値
[data-disabled]無効になっている場合に表示されます。
[data-orientation]"vertical" | "horizontal"

範囲 ​

範囲の部分。SliderTrack 内に存在する必要があります。

プロパティ既定値タイプ
as
'span'
AsTag | Component

このコンポーネントがレンダリングする要素またはコンポーネント。asChild で上書きできます。

asChild
boolean

子として渡されたデフォルトのレンダリングされた要素を変更し、それらのプロパティと動作をマージします。

Composition ガイドの詳細については、こちらを参照してください。

データ属性値
[data-disabled]無効になっている場合に表示されます。
[data-orientation]"vertical" | "horizontal"

サム ​

ドラッグ可能なサムです。複数のサムをレンダリングできます。

プロパティ既定値タイプ
as
'div'
AsTag | Component

このコンポーネントがレンダリングする要素またはコンポーネント。asChild で上書きできます。

asChild
boolean

子として渡されたデフォルトのレンダリングされた要素を変更し、それらのプロパティと動作をマージします。

Composition ガイドの詳細については、こちらを参照してください。

データ属性値
[data-disabled]無効になっている場合に表示されます。
[data-orientation]"vertical" | "horizontal"

例

垂直方向

orientationプロパティを使用して、垂直スライダーを作成します。

vue
// index.vue
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
</script>

<template>
  <SliderRoot
    class="SliderRoot"
    :default-value="[50]"
    orientation="vertical"
  >
    <SliderTrack class="SliderTrack">
      <SliderRange class="SliderRange" />
    </SliderTrack>
    <SliderThumb class="SliderThumb" />
  </SliderRoot>
</template>
css
/* styles.css */
.SliderRoot {
  position: relative;
  display: flex;
  align-items: center;
}
.SliderRoot[data-orientation="vertical"] {
  flex-direction: column;
  width: 20px;
  height: 100px;
}

.SliderTrack {
  position: relative;
  flex-grow: 1;
  background-color: grey;
}
.SliderTrack[data-orientation="vertical"] {
  width: 3px;
}

.SliderRange {
  position: absolute;
  background-color: black;
}
.SliderRange[data-orientation="vertical"] {
  width: 100%;
}

.SliderThumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
}

範囲を作成する

複数のサムと値を追加して、範囲スライダーを作成します。

vue
// index.vue
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
</script>

<template>
  <SliderRoot :default-value="[25, 75]">
    <SliderTrack>
      <SliderRange />
    </SliderTrack>
    <SliderThumb />
    <SliderThumb />
  </SliderRoot>
</template>

ステップサイズを定義する

stepプロパティを使用して、ステップ間隔を増やします。

vue
// index.vue
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
</script>

<template>
  <SliderRoot
    :default-value="[50]"
    :step="10"
  >
    <SliderTrack>
      <SliderRange />
    </SliderTrack>
    <SliderThumb />
  </SliderRoot>
</template>

サムのオーバーラップを防ぐ

minStepsBetweenThumbsを使用して、値が同じサムを避けます。

vue
// index.vue
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
</script>

<template>
  <SliderRoot
    :default-value="[25, 75]"
    :step="10"
    :min-steps-between-thumbs="1"
  >
    <SliderTrack>
      <SliderRange />
    </SliderTrack>
    <SliderThumb />
    <SliderThumb />
  </SliderRoot>
</template>

アクセシビリティ

Slider WAI-ARIA デザインパターン準拠。

キーボードインタラクション

キー説明
右矢印
orientationに応じて、step値を加算/減算します。
左矢印
orientationに応じて、step値を加算/減算します。
上矢印
値をstep量だけ増やします。
下矢印
値をstep量だけ減らします。
ページアップ
値を大きなstepだけ増やします。
ページダウン
値を大きなstepだけ減らします。
シフト + 上矢印
値を大きなstepだけ増やします。
シフト + 下矢印
値を大きなstepだけ減らします。
ホーム
値を最小値に設定します。
エンド
値を最大値に設定します。

カスタムAPI

プリミティブパーツを独自のコンポーネントに抽象化して、独自APIを作成します。

すべてのパーツを抽象化

この例では、Sliderパーツをすべて抽象化して、自己完結型の要素として使用できるようにします。

使用法

vue
<script setup lang="ts">
import { Slider } from './your-slider'
</script>

<template>
  <Slider :default-value="[25]" />
</template>

実装

ts
// your-slider.ts
export { default as Slider } from 'Slider.vue'
vue
 <!-- Slider.vue -->
<script setup lang="ts">
import { SlideRoot, SliderRange, type SliderRootEmits, type SliderRootProps, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'

const props = defineProps<SliderRootProps>()
const emits = defineEmits<SliderRootEmits>()

const forward = useForwardPropsEmits(props, emits)
</script>

<template>
  <SliderRoot v-bind="forward">
    <SliderTrack>
      <SliderRange />
    </SliderTrack>

    <SliderThumb
      v-for="(_, i) in value"
      :key="i"
    />
  </SliderRoot>
</template>

注意点

マウスイベントが発生しない

制約が実装中に発生するため、次の例は期待どおりに動作せず、@mousedownおよび@mousedownイベントハンドラーは発生しません

vue
<SliderRoot
  @mousedown="() => { console.log('onMouseDown')  }"
  @mouseup="() => { console.log('onMouseUp')  }"
>
  …
</SliderRoot>

代わりにポインターイベント（例：@pointerdown、@pointerup）の使用をお勧めします。上記の制約に関係なく、これらのイベントはすべてのポインター入力タイプ（マウス、タッチ、ペンなど）で発生するため、クロスプラットフォーム/デバイスの処理にもっと適しています。