added new slider and commented out old slider

Author: orionarcher

src/pages/PhononVisualization/PhononVisualization.tsx

@@ -17,7 +17,8 @@ import { ScenePosition } from '../../components/crystal-toolkit/scene/inset-help
 import { CameraState } from '../../components/crystal-toolkit/CameraContextProvider/camera-reducer';
 import * as THREE from 'three';
 import { Camera } from 'three';
-import SimpleSlider from '../../components/crystal-toolkit/scene/animation-slider';
+// import SimpleSlider from '../../components/crystal-toolkit/scene/animation-slider';
+import { RangeSlider } from '../../components/data-entry/RangeSlider';
 import { useRef } from 'react';
 
 export const PhononVisualization: React.FC = () => {
@@ -49,44 +50,51 @@ export const PhononVisualization: React.FC = () => {
         toggleVisibility={{}}
       />
       {/* X slider*/}
-      <SimpleSlider
-        onUpdate={(a) => {
-          if (a != tilingX) {
-            setTilingX(a);
-          }
-        }}
-        onChange={(a) => {
-          console.log(a);
-        }}
+      <RangeSlider
         domain={[0, maxTiling]}
-        values={[tilingX]}
-      />
-      {/* Y slider*/}
-      <SimpleSlider
-        onUpdate={(a) => {
-          if (a != tilingX) {
-            setTilingY(a);
-          }
+        onChange={(values) => {
+          setTilingX(values[0]);
+          console.log(values);
         }}
-        onChange={(a) => {
-          console.log(a);
-        }}
-        domain={[0, maxTiling]}
-        values={[tilingY]}
-      />
-      {/* Z slider */}
-      <SimpleSlider
-        onUpdate={(a) => {
-          if (a != tilingX) {
-            setTilingZ(a);
-          }
-        }}
-        onChange={(a) => {
-          console.log(a);
-        }}
-        domain={[0, maxTiling]}
-        values={[tilingZ]}
       />
+      {/*<SimpleSlider*/}
+      {/*  onUpdate={(a) => {*/}
+      {/*    if (a != tilingX) {*/}
+      {/*      setTilingX(a);*/}
+      {/*    }*/}
+      {/*  }}*/}
+      {/*  onChange={(a) => {*/}
+      {/*    console.log(a);*/}
+      {/*  }}*/}
+      {/*  domain={[0, maxTiling]}*/}
+      {/*  values={[tilingX]}*/}
+      {/*/>*/}
+      {/*/!* Y slider*!/*/}
+      {/*<SimpleSlider*/}
+      {/*  onUpdate={(a) => {*/}
+      {/*    if (a != tilingX) {*/}
+      {/*      setTilingY(a);*/}
+      {/*    }*/}
+      {/*  }}*/}
+      {/*  onChange={(a) => {*/}
+      {/*    console.log(a);*/}
+      {/*  }}*/}
+      {/*  domain={[0, maxTiling]}*/}
+      {/*  values={[tilingY]}*/}
+      {/*/>*/}
+      {/*/!* Z slider *!/*/}
+      {/*<SimpleSlider*/}
+      {/*  onUpdate={(a) => {*/}
+      {/*    if (a != tilingX) {*/}
+      {/*      setTilingZ(a);*/}
+      {/*    }*/}
+      {/*  }}*/}
+      {/*  onChange={(a) => {*/}
+      {/*    console.log(a);*/}
+      {/*  }}*/}
+      {/*  domain={[0, maxTiling]}*/}
+      {/*  values={[tilingZ]}*/}
+      {/*/>*/}
     </div>
   );
 };