27 lines
794 B
JavaScript
27 lines
794 B
JavaScript
import React, { useState, useEffect, useRef } from "react";
|
|
|
|
import styles from "./RangeSlider.scss"
|
|
|
|
import tw from "twin.macro"
|
|
|
|
|
|
|
|
export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
|
|
let ref = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div tw="flex flex-col py-2" {...props}>
|
|
<div className="rs-label w-full" ref={ref}>
|
|
{!right ? (rangeType + "" + value) : (value + "" + rangeType)}
|
|
</div>
|
|
<input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)} />
|
|
</div>
|
|
);
|
|
}
|