Slider

Slider is a component that allows users to select a value from a range of values.

'use client'

import { Slider, SliderThumb } from '@nerdfish/ui'
import * as React from 'react'

export function SliderExample() {
	return (
		<Slider defaultValue={[50]} max={100} step={1}>
			<SliderThumb />
		</Slider>
	)
}

Usage

import { Slider, SliderThumb } from '@nerdfish/ui'

<Slider defaultValue={[1, 100]} max={100} step={1}>
	<SliderThumb />
</Slider>

Range

'use client'

import { Slider, SliderThumb } from '@nerdfish/ui'
import * as React from 'react'

export function SliderRangeExample() {
	return (
		<Slider defaultValue={[50, 80]} max={100} step={10}>
			<SliderThumb />
			<SliderThumb />
		</Slider>
	)
}

Input Size

'use client'

import { Slider, SliderThumb } from '@nerdfish/ui'
import * as React from 'react'

export function SliderInputSizeExample() {
	return (
		<div className="gap-lg flex w-full flex-col">
			<Slider inputSize="sm" defaultValue={[50]} max={100} step={10}>
				<SliderThumb />
			</Slider>
			<Slider inputSize="md" defaultValue={[50]} max={100} step={10}>
				<SliderThumb />
			</Slider>
			<Slider inputSize="lg" defaultValue={[50]} max={100} step={10}>
				<SliderThumb />
			</Slider>
			<Slider inputSize="xl" defaultValue={[50]} max={100} step={10}>
				<SliderThumb />
			</Slider>
		</div>
	)
}

Variant

'use client'

import { Slider, SliderThumb } from '@nerdfish/ui'
import * as React from 'react'

const variants = [
	'default',
	'muted',
	'accent',
	'danger',
	'success',
	'warning',
	'info',
] as const

export function SliderVariantExample({
	min = 0,
	max = 100,
	step = 1,
	defaultValue = [50],
}: {
	min?: number
	max?: number
	step?: number
	defaultValue?: number[]
}) {
	return (
		<div className="gap-lg flex w-full flex-col">
			{variants.map((variant) => (
				<Slider
					key={variant}
					variant={variant}
					min={min}
					max={max}
					step={step}
					defaultValue={defaultValue}
					aria-label={`${variant} variant slider`}
				>
					<SliderThumb />
				</Slider>
			))}
		</div>
	)
}

Custom

'use client'

import { Slider, SliderThumb } from '@nerdfish/ui'
import * as React from 'react'

export function SliderCustomExample() {
	return (
		<div className="gap-lg flex w-full flex-col">
			<Slider
				defaultValue={[50]}
				max={100}
				step={10}
				className="text-green-500"
			>
				<SliderThumb />
			</Slider>
		</div>
	)
}