Adaptive precision slider is a production-ready controls component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { AdaptivePrecisionSlider } from "@/components/ui/bjork-adaptive-precision-slider";
const DEFAULT_FALLOFF = 48;
const DEFAULT_SHOW_GAIN = true;
function pad(n: number) {
return String(n).padStart(2, "0");
}
function fineDecimals(v: number) {
return Number.isInteger(Math.round(v * 1e6) / 1e4) ? 2 : 3;
}
function formatEv(v: number) {
return `${v >= 0 ? "+" : ""}${v.toFixed(fineDecimals(v))} EV`;
}
function formatMeters(v: number) {
return `${v.toFixed(fineDecimals(v))} m`;
}
function formatTimecode(v: number) {
const whole = Math.floor(v);
const frames = Math.round((v - whole) * 25) % 25;
return `${pad(Math.floor(whole / 60))}:${pad(whole % 60)}.${pad(frames)}`;
}
function SourceDemo(){
const isPreview = false;
const attractParam = null === "1";
const [falloff, setFalloff] = useState(DEFAULT_FALLOFF);
const [showGain, setShowGain] = useState(DEFAULT_SHOW_GAIN);
const reset = () => {
setFalloff(DEFAULT_FALLOFF);
setShowGain(DEFAULT_SHOW_GAIN);
};
return <>
<div className="flex w-[min(520px,calc(100vw-56px))] min-w-0 flex-col gap-[28px]">
<AdaptivePrecisionSlider
label="Exposure"
value={isPreview ? 0.35 : undefined}
defaultValue={0}
debugGain={isPreview ? 0.25 : undefined}
min={-2}
max={2}
step={0.01}
format={formatEv}
precisionFalloff={falloff}
showGain={showGain}
attract={attractParam}
/>
<AdaptivePrecisionSlider
label="Focus distance"
defaultValue={2.4}
min={0.3}
max={10}
step={0.01}
format={formatMeters}
precisionFalloff={falloff}
showGain={showGain}
/>
<AdaptivePrecisionSlider
label="Timecode"
defaultValue={0}
min={0}
max={600}
step={0.04}
format={formatTimecode}
precisionFalloff={falloff}
showGain={showGain}
/>
<p className="px-[12px] text-[12px] text-[color:var(--bjork-text-soft,rgba(237,237,237,0.5))]">
Drag, then drift away from the track to fine-tune.
</p>
</div>
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}