Slider

1import { Slider } from "@/components/ui/slider"23export function SliderBasicDemo() {4  return (5    <div className="space-y-6 w-full max-w-sm">6      <div className="space-y-2">7        <span className="text-sm font-medium leading-none">Default</span>8        <Slider />9      </div>10      <div className="space-y-2">11        <span className="text-sm font-medium leading-none">With initial value</span>12        <Slider defaultValue={50} />13      </div>14      <div className="space-y-2">15        <span className="text-sm font-medium leading-none">Disabled</span>16        <Slider defaultValue={33} disabled />17      </div>18    </div>19  )20}

1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import { Slider } from "@/components/ui/slider"56export function SliderFormDemo() {7  const [brightness, setBrightness] = createSignal(75)8  const [contrast, setContrast] = createSignal(100)9  const [saturation, setSaturation] = createSignal(100)1011  const isDefault = createMemo(() =>12    brightness() === 75 && contrast() === 100 && saturation() === 10013  )1415  const resetDefaults = () => {16    setBrightness(75)17    setContrast(100)18    setSaturation(100)19  }2021  return (22    <div className="space-y-6 w-full max-w-sm">23      <div className="space-y-1">24        <h4 className="text-sm font-medium leading-none">Display Settings</h4>25        <p className="text-sm text-muted-foreground">26          Adjust brightness, contrast, and saturation.27        </p>28      </div>29      <div className="space-y-4">30        <div className="space-y-2">31          <div className="flex items-center justify-between">32            <span className="text-sm">Brightness</span>33            <span className="text-sm text-muted-foreground tabular-nums">{brightness()}%</span>34          </div>35          <Slider value={brightness()} onValueChange={setBrightness} />36        </div>37        <div className="space-y-2">38          <div className="flex items-center justify-between">39            <span className="text-sm">Contrast</span>40            <span className="text-sm text-muted-foreground tabular-nums">{contrast()}%</span>41          </div>42          <Slider value={contrast()} max={200} onValueChange={setContrast} />43        </div>44        <div className="space-y-2">45          <div className="flex items-center justify-between">46            <span className="text-sm">Saturation</span>47            <span className="text-sm text-muted-foreground tabular-nums">{saturation()}%</span>48          </div>49          <Slider value={saturation()} max={200} onValueChange={setSaturation} />50        </div>51      </div>52      <button53        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 border border-input bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"54        disabled={isDefault()}55        onClick={resetDefaults}56      >57        Reset to defaults58      </button>59    </div>60  )61}

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Slider } from "@/components/ui/slider"56export function SliderStepDemo() {7  const [fontSize, setFontSize] = createSignal(16)8  const [opacity, setOpacity] = createSignal(100)910  return (11    <div className="space-y-6 w-full max-w-sm">12      <div className="space-y-2">13        <div className="flex items-center justify-between">14          <span className="text-sm font-medium">Font Size</span>15          <span className="text-sm text-muted-foreground tabular-nums">{fontSize()}px</span>16        </div>17        <Slider18          value={fontSize()}19          min={8}20          max={32}21          step={1}22          onValueChange={setFontSize}23        />24        <div className="flex justify-between text-xs text-muted-foreground">25          <span>8px</span>26          <span>32px</span>27        </div>28      </div>29      <div className="space-y-2">30        <div className="flex items-center justify-between">31          <span className="text-sm font-medium">Opacity</span>32          <span className="text-sm text-muted-foreground tabular-nums">{opacity()}%</span>33        </div>34        <Slider35          value={opacity()}36          min={0}37          max={100}38          step={5}39          onValueChange={setOpacity}40        />41        <div className="flex justify-between text-xs text-muted-foreground">42          <span>0%</span>43          <span>100%</span>44        </div>45      </div>46      <div47        className="rounded-md border border-border p-4 text-center text-sm"48        style={`font-size: ${fontSize()}px; opacity: ${opacity() / 100}`}49      >50        Preview text51      </div>52    </div>53  )54}