Slider

The Slider is a 3D component that provides users with an interactive way to select parameters.

The

Slider

wrapper creates and renders a 3D interactive slider in a react application

The

maxValue

prop sets the max value of the slider. Defaults to 10.

The

steps

prop sets the increment of each tick/mark. If you want the slider to be in increments of 3, then steps would be 3. Defaults to 2.

The

onChange

prop takes in the callback function that is fired when the sliders value changes. Will take in a number corresponding to slider position. Recommended that the function be a useState hook

The

value

prop is used to show a visual number that corresponds with each position. Should be the output of the

onChange

prop.

import { Canvas } from "@react-three/fiber";
import { Slider } from "r3dy";

export default function App() {
  return (
      <Canvas>
        <Slider />
      </Canvas>
  );
}