Dual Range Slider Custom Label

1"use client";
2 
3import * as React from "react";
4import { DualRangeSlider } from "@/components/ui/dual-range-slider";
5import { useState } from "react";
6 
7const DualRangeSliderCustomLabel = () => {
8  const [values, setValues] = useState([0, 100]);
9 
10  return (
11    <div className="w-full space-y-5 px-10">
12      <DualRangeSlider
13        label={(value) => <span>{value}℃</span>}
14        value={values}
15        onValueChange={setValues}
16        min={0}
17        max={100}
18        step={1}
19      />
20    </div>
21  );
22};
23export default DualRangeSliderCustomLabel;