Dual Range Slider Label Position

1"use client";
2 
3import * as React from "react";
4import { DualRangeSlider } from "@/components/ui/dual-range-slider";
5import { useState } from "react";
6 
7const DualRangeSliderLabelPosition = () => {
8  const [values, setValues] = useState([0, 100]);
9 
10  return (
11    <div className="w-full space-y-5 px-10">
12      <div className="mb-8">TOP:</div>
13      <DualRangeSlider
14        label={(value) => value}
15        labelPosition="top"
16        value={values}
17        onValueChange={setValues}
18        min={0}
19        max={100}
20        step={1}
21      />
22      <div>BOTTOM:</div>
23      <DualRangeSlider
24        label={(value) => value}
25        labelPosition="bottom"
26        value={values}
27        onValueChange={setValues}
28        min={0}
29        max={100}
30        step={1}
31      />
32    </div>
33  );
34};
35export default DualRangeSliderLabelPosition;