Slider

Slider primitive wrapper

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

export default function SliderDemoExample() {
  return (
    <Slider defaultValue={[75]} min={0} max={100} step={1} />
  )
}

Installation

npx @fictjs/shadcn@latest add slider

Install the runtime dependencies:

npm install @fictjs/radix-ui

Copy the Fict shadcn component into your project.

Source

components/ui/slider.tsx

src/components/ui/slider.tsx

import { Slider as SliderPrimitive } from '@fictjs/radix-ui'

import { cn } from '@/lib/cn'

type SliderProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}

export function Slider(props: SliderProps) {
  const { class: className, children, ...rest } = props
  return (
    <SliderPrimitive.Root
      class={cn('relative flex w-full touch-none select-none items-center', className)}
      {...rest}
    >
      {children ?? (
        <>
          <SliderPrimitive.Track class='relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20'>
            <SliderPrimitive.Range class='absolute h-full bg-primary' />
          </SliderPrimitive.Track>
          <SliderPrimitive.Thumb class='block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50' />
        </>
      )}
    </SliderPrimitive.Root>
  )
}

Usage

Examples

Range

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

export default function SliderRangeExample() {
  return (
    <Slider defaultValue={[25, 50]} min={0} max={100} step={5} />
  )
}

Multiple

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

export default function SliderMultipleExample() {
  return (
    <Slider defaultValue={[10, 20, 70]} min={0} max={100} step={10} />
  )
}

Vertical

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

export default function SliderVerticalExample() {
  return <div class="flex h-48 gap-8"><Slider orientation="vertical" defaultValue={[50]} min={0} max={100} /><Slider orientation="vertical" defaultValue={[25]} min={0} max={100} /></div>
}

Controlled

Temperature0.3, 0.7

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

export default function SliderControlledExample() {
  let values = $state([0.3, 0.7])
  return <div class="grid w-full max-w-sm gap-3"><div class="flex justify-between"><label>Temperature</label><span>{values[0]}, {values[1]}</span></div><Slider value={values} min={0} max={1} step={0.1} onValueChange={next => { values = next }} /></div>
}

Disabled

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

export default function SliderDisabledExample() {
  return (
    <Slider disabled defaultValue={[50]} min={0} max={100} step={1} />
  )
}

Rtl

import { Slider } from '@/components/ui/slider'

...

import { Slider } from '@/components/ui/slider'

const directions = { ar: 'rtl', he: 'rtl', en: 'ltr' } as const

export default function SliderRtlExample() {
  let language = $state<keyof typeof directions>('ar')
  return <div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof directions }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><Slider dir={directions[language]} defaultValue={[75]} min={0} max={100} /></div>
}

Skeleton Sonner