Slider

사용자가 주어진 범위 내에서 값을 선택하는 입력 컴포넌트입니다.

Docs API Reference

<script lang="ts">
  import { Slider } from "$lib/components/ui/slider/index.js";
 
  let value = $state(50);
</script>
 
<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />

설치

pnpm dlx shadcn-svelte@latest add slider

npx shadcn-svelte@latest add slider

npx shadcn-svelte@latest add slider

bun x shadcn-svelte@latest add slider

bits-ui를 설치합니다:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

다음 코드를 프로젝트에 복사하여 붙여넣습니다.

import Root from "./slider.svelte";

export {
  Root,
  //
  Root as Slider,
};

사용법

<script lang="ts">
  import { Slider } from "$lib/components/ui/slider/index.js";
  let value = $state(33);
</script>

<Slider type="single" bind:value max={100} step={1} />

Skeleton Sonner