67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { ChangeEvent, useContext, useState } from "react";
|
|
import {
|
|
SceneViewContext,
|
|
SceneViewContextType,
|
|
} from "../providers/scene-view-provider";
|
|
|
|
export function RangeSlider() {
|
|
const { sceneView } = useContext(SceneViewContext) as SceneViewContextType;
|
|
const [scale, setScale] = useState<number>(1);
|
|
|
|
const handleChange = (e: ChangeEvent) => {
|
|
if (!sceneView) return;
|
|
const t = e.target as HTMLInputElement;
|
|
const z = parseFloat(t.value);
|
|
if (!isNaN(z)) {
|
|
setScale(z);
|
|
sceneView.setZScale(z);
|
|
}
|
|
};
|
|
return (
|
|
<div className="relative mb-8">
|
|
<label
|
|
htmlFor="steps-range"
|
|
className="block mb-2 text-sm font-medium text-gray-500 dark:text-gray-400"
|
|
>
|
|
Z-Scaling
|
|
</label>
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="1"
|
|
max="5"
|
|
value={scale}
|
|
step="0.5"
|
|
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-400"
|
|
onChange={handleChange}
|
|
></input>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">
|
|
1
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-1/8 -translate-x-1/8 -bottom-6">
|
|
1.5
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-2/8 -translate-x-2/8 -bottom-6">
|
|
2
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-3/8 -translate-x-3/8 -bottom-6">
|
|
2.5
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-4/8 -translate-x-4/8 -bottom-6">
|
|
3
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-5/8 -translate-x-5/8 -bottom-6">
|
|
3.5
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-6/8 -translate-x-6/8 -bottom-6">
|
|
4
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-7/8 -translate-x-7/8 -bottom-6">
|
|
4.5
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">
|
|
5
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|