Slider

1import { Slider } from "passport-ui";
2import { Label } from "passport-ui";
3import { useState } from "react";

1function SliderExample() {
2  const [value, setValue] = useState([50]);
3 
4  return (
5    <div className="w-sm">
6      <div className="meta-container">
7        <Label>Slider</Label>
8        <Slider 
9          value={value} 
10          onValueChange={setValue}
11          max={100}
12          step={1}
13        />
14        <p>Current value: {value.join(", ")}</p>
15      </div>
16    </div>
17  );
18}
19 
20{/* Range slider */}
21function RangeSlider() {
22  const [range, setRange] = useState([20, 80]);
23 
24  return (
25    <Slider 
26      value={range}
27      onValueChange={setRange}
28      max={100}
29      step={1}
30    />
31  );
32}