dual-range-slider

PreviousNext
Docs
ui-layoutscomponent

Preview

Loading preview…
./registry/components/form/slider/dual-range-slider.tsx
'use client';
import React, { useState } from 'react';
import { DualRangeSlider } from '@/components/ui/slider';

export default function index() {
  const [celPer, setCelPer] = useState(70);
  const [values, setValues] = useState([0, 100]);
  return (
    <>
      <div className=' w-3/5 mx-auto space-y-20 py-20'>
        <DualRangeSlider
          label={() => <>℃</>}
          value={values}
          onValueChange={setValues}
          min={0}
          max={100}
          step={1}
        />
      </div>
    </>
  );
}

Installation

npx shadcn@latest add @ui-layouts/dual-range-slider

Usage

import { DualRangeSlider } from "@/components/dual-range-slider"
<DualRangeSlider />