1  import React from "react";
 2  import { getHumanReadable } from "@/app/util/util";
 3  
 4  export default function Sliders({ tripInformation, setTripInformation }) {
 5    const handleKmChange = (e) => {
 6      setTripInformation((update) => {
 7        update.distance_kilometer = e.target.value;
 8      });
 9    };
10  
11    const handleTimeChange = (e) => {
12      setTripInformation((update) => {
13        update.time_minutes = e.target.value;
14      });
15    };
16    return (
17      <>
18        <div className="relative flex items-center py-5">
19          <div className="flex-grow border-t border-dashed border-gray-400"></div>
20          <span className="mx-4 flex-shrink text-gray-400">Handmatig</span>
21          <div className="flex-grow border-t border-dashed border-gray-400"></div>
22        </div>
23  
24        <div className="relative mb-3">
25          <label htmlFor="km-range" className="text-sm leading-7 text-gray-600">
26            Benodigde kilometers
27          </label>
28          <input
29            id="km-range"
30            type="range"
31            value={tripInformation.distance_kilometer}
32            min="0"
33            max="1000"
34            onChange={handleKmChange}
35            name="kilometers"
36            className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
37          />
38          <div id="km-range-value" className="text-center text-sm text-gray-700">
39            {tripInformation.distance_kilometer + " Kilometer"}
40          </div>
41        </div>
42  
43        <div className="relative mb-3">
44          <label htmlFor="time-range" className="text-sm leading-7 text-gray-600">
45            Huur tijd
46          </label>
47          <input
48            id="time-range"
49            type="range"
50            value={tripInformation.time_minutes}
51            min="0"
52            max="1440"
53            step="15"
54            name="kilometers"
55            onChange={handleTimeChange}
56            className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
57          />
58          <div
59            id="time-range-value"
60            className="text-center text-sm text-gray-700"
61          >
62            {getHumanReadable(tripInformation.time_minutes)}
63          </div>
64        </div>
65      </>
66    );
67  }