Slider

'use client';

import { Slider } from '@/components/ui/slider';

export function SliderDefault() {
  return (
    <div className='w-full max-w-xs'>
      <Slider defaultValue={50} />
    </div>
  );
}

'use client';

import { Label } from '@/components/ui/label';
import { Slider, SliderValue } from '@/components/ui/slider';

export function SliderWithValue() {
  return (
    <div className='w-full max-w-xs'>
      <Slider defaultValue={75}>
        <div className='mb-2 flex justify-between'>
          <Label>Volume</Label>
          <SliderValue />
        </div>
      </Slider>
    </div>
  );
}