Things

The Slider component allows users to select a value from a range by dragging a handle. It features bold borders and shadows that match the Things design system. Built from scratch using React and native HTML input elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/slider.json

Usage

tsx

import { Slider } from "@/components/ui/slider"
import { useState } from "react"

function MyComponent() {
  const [value, setValue] = useState([50])
  
  return (
    <Slider 
      value={value}
      onValueChange={setValue}
      min={0}
      max={100}
      step={1}
    />
  )
}

Examples

Volume50%

Brightness25%

Disabled50%

Custom Range (0-200)100