PaperSlider

Square-leaning slider control for value tuning.

↗ direct manipulation, paper-style.

Preview

Opacity35%

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface PaperSliderProps extends React.InputHTMLAttributes<HTMLInputElement> {

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperSlider/paperSlider.tsx⎘
Step 2.Create the barrel:
components/ui/paperSlider/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperSlider'
```

Variants

Default

Labeled

Volume20%

Props

Prop	Type	Default	Description
`label`	`string`	`undefined`	Optional mono label above control.
`min / max`	`number`	`0 / 100`	Allowed value range.
`value / defaultValue`	`number`	`undefined`	Controlled or uncontrolled value.

Examples

Density control

Great for tuning UI spacing in playgrounds.

Density45%

<PaperSlider label="Density" defaultValue={45} />

Audio level

Small footprint control for media panels.

Gain72%

<PaperSlider label="Gain" defaultValue={72} />