Sliderstandard

범위 안에서 값을 끌어 고르는 슬라이더(slider)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Slider` 위에 서 있습니다. 값을 하나 또는 여러 개(범위 선택) 받습니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/slider

Default

Basic

Range

Multiple Thumbs

Vertical

Controlled

Temperature0.3, 0.7

Disabled

slider-example.tsx

"use client"
import * as React from "react"
import {  Example,  ExampleWrapper,} from "@/components/example"import { Label } from "@/components/ui/label"import { Slider } from "@/components/ui/slider"
export default function SliderExample() {  return (    <ExampleWrapper>      <SliderBasic />      <SliderRange />      <SliderMultiple />      <SliderVertical />      <SliderControlled />      <SliderDisabled />    </ExampleWrapper>  )}
function SliderBasic() {  return (    <Example title="Basic">      <Slider aria-label="Value" defaultValue={50} max={100} step={1} />    </Example>  )}
function SliderRange() {  return (    <Example title="Range">      <Slider aria-label="Value" defaultValue={[25, 50]} max={100} step={5} />    </Example>  )}
function SliderMultiple() {  return (    <Example title="Multiple Thumbs">      <Slider aria-label="Value" defaultValue={[10, 20, 70]} max={100} step={10} />    </Example>  )}
function SliderVertical() {  return (    <Example title="Vertical">      <div className="flex items-center gap-6">        <Slider aria-label="Value"          defaultValue={[50]}          max={100}          step={1}          orientation="vertical"          className="h-40"        />        <Slider aria-label="Value"          defaultValue={[25]}          max={100}          step={1}          orientation="vertical"          className="h-40"        />      </div>    </Example>  )}
function SliderControlled() {  const [value, setValue] = React.useState([0.3, 0.7])
  return (    <Example title="Controlled">      <div className="grid w-full gap-3">        <div className="flex items-center justify-between gap-2">          <Label htmlFor="slider-demo-temperature">Temperature</Label>          <span className="text-sm text-muted-foreground">            {value.join(", ")}          </span>        </div>        <Slider aria-label="Temperature"          id="slider-demo-temperature"          value={value}          onValueChange={(value) => setValue(value as number[])}          min={0}          max={1}          step={0.1}        />      </div>    </Example>  )}
function SliderDisabled() {  return (    <Example title="Disabled">      <Slider aria-label="Value" defaultValue={[50]} max={100} step={1} disabled />    </Example>  )}