概要

プロパティ	型	デフォルト値
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"surface"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし

例

サイズ

size プロパティを使用してサイズを制御します。

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} size="1" />
  <Slider defaultValue={[50]} size="2" />
  <Slider defaultValue={[75]} size="3" />
</Flex>

バリアント

variant プロパティを使用して視覚スタイルを制御します。

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} variant="surface" />
  <Slider defaultValue={[50]} variant="classic" />
  <Slider defaultValue={[75]} variant="soft" />
</Flex>

色

color プロパティを使用して特定の色を割り当てます。

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[20]} color="indigo" />
  <Slider defaultValue={[40]} color="cyan" />
  <Slider defaultValue={[60]} color="orange" />
  <Slider defaultValue={[80]} color="crimson" />
</Flex>

ハイコントラスト

highContrast プロパティを使用して、ライトモードの色コントラストを高めます。

<Grid columns="2" gap="4">
  <Slider defaultValue={[10]} color="indigo" />
  <Slider defaultValue={[10]} color="indigo" highContrast />
  <Slider defaultValue={[30]} color="cyan" />
  <Slider defaultValue={[30]} color="cyan" highContrast />
  <Slider defaultValue={[50]} color="orange" />
  <Slider defaultValue={[50]} color="orange" highContrast />
  <Slider defaultValue={[70]} color="crimson" />
  <Slider defaultValue={[70]} color="crimson" highContrast />
  <Slider defaultValue={[90]} color="gray" />
  <Slider defaultValue={[90]} color="gray" highContrast />
</Grid>

角丸

radius プロパティを使用して特定の半径値を割り当てます。

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} radius="none" />
  <Slider defaultValue={[50]} radius="small" />
  <Slider defaultValue={[75]} radius="full" />
</Flex>

範囲

複数の値を指定して範囲スライダーを作成します。

<Slider defaultValue={[25, 75]} />

前へスケルトン

次へスピナー

GitHubでこのページを編集する