Single-value slider

A Slider bound to local state with a live value readout — the standard pattern for a single setting like volume or zoom.

Slider

Preview

Volume40%

Source

apps/docs/app/recipes/slider-single/recipe.tsx

'use client';

import { useState } from 'react';
import { Slider } from '@hey-mike/tungsten';

export default function SliderSingleRecipe() {
  const [volume, setVolume] = useState(40);
  return (
    <div className="w-72">
      <div className="mb-2 flex items-baseline justify-between">
        <span className="text-ink-1 text-sm font-medium">Volume</span>
        <span className="text-ink-2 text-sm tabular-nums">{volume}%</span>
      </div>
      <Slider
        label="Volume"
        value={volume}
        onValueChange={(v) => setVolume(v as number)}
      />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Slider } from '@hey-mike/tungsten';

export default function SliderSingleRecipe() {
  const [volume, setVolume] = useState(40);
  return (
    <div className="w-72">
      <div className="mb-2 flex items-baseline justify-between">
        <span className="text-ink-1 text-sm font-medium">Volume</span>
        <span className="text-ink-2 text-sm tabular-nums">{volume}%</span>
      </div>
      <Slider
        label="Volume"
        value={volume}
        onValueChange={(v) => setVolume(v as number)}
      />
    </div>
  );
}