Standard slider replaced with a custom

src/app/modules/components/category_selector.module.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react"
 import { Category } from "@/app/interfaces"
 import { CategoryEl } from "@/app/modules/components/card.module";
 import style from "@/app/styles/category_selector.module.css";
-import NextImage from 'next/image';
 import style_workshop from "@/app/styles/workshop/page.module.css";
 import IconSvg from '@/app/resources/icon.svg';
 
@@ -50,7 +49,9 @@ const CategorySelector = ({ enabledCategories, allCategories, onChange }: Catego
         <div>
             <h4 style={{ margin: 0, marginBottom: ".9rem" }}>Выбранные категории:</h4>
             <div className={style.container}>
-                {categoriesEnabled.length > 0 ? categoriesEnabled : <p style={{ margin: 0, color: "gray", marginTop: "2.5px", marginBottom: "2.5px" }}>Категории не выбраны</p>}
+                {categoriesEnabled.length > 0 ? categoriesEnabled :
+                    <p style={{ margin: 0, color: "gray", marginTop: "2.5px", marginBottom: "2.5px" }}>Категории не выбраны</p>
+                }
             </div>
             <hr />
             <div className={style.container}>

src/app/modules/components/skinView.module.tsx

@@ -104,4 +104,4 @@ const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, back
 
 }
 
-export default SkinView3D;
+export default SkinView3D;

src/app/modules/components/slider.module.tsx

@@ -0,0 +1,80 @@
+import Style from '@/app/styles/slider.module.css';
+import { useEffect, useState } from 'react';
+
+
+const Slider = ({ initial, range, onChange }: { initial: number, range: number, onChange(val: number): void }) => {
+    const [position, setPosition] = useState<number>(0);
+    const [lastVal, setLastVal] = useState<number>(0);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+
+    const calcPosition = (range: number, y: number, ival?: number) => {
+        const rect = document.getElementById('track').getBoundingClientRect();
+        const realRange = (rect.height - 16) / range;
+        const value = ival ?? Math.min(Math.max(Math.floor((y - rect.top) / realRange), 0), range);
+        const val = (value * realRange) / rect.height * 100;
+        return { position: Math.min(val, ((rect.height - 16) / rect.height) * 100), value: value }
+    }
+
+    const mouseDown = (event: any) => {
+        setIsDragging(true);
+        document.body.style.userSelect = 'none';
+        const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+        const position = calcPosition(range, clientY);
+        setPosition(position.position);
+        if (position.value !== lastVal) {
+            onChange(position.value);
+            setLastVal(position.value);
+        }
+    }
+
+    const mouseMove = (event: any) => {
+        const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+        const position = calcPosition(range, clientY);
+        setPosition(position.position);
+        if (position.value !== lastVal) {
+            onChange(position.value);
+            setLastVal(position.value);
+        }
+    }
+
+    const mouseUp = () => {
+        setIsDragging(false);
+        document.body.style.userSelect = 'auto';
+    }
+
+    useEffect(() => {
+        setPosition(calcPosition(range, 0, initial).position);
+    }, [])
+
+    return (
+        <>
+            {isDragging &&
+                <div
+                    style={{ position: 'fixed', inset: 0, touchAction: 'none', cursor: 'pointer' }}
+                    onMouseMove={mouseMove}
+                    onMouseUp={mouseUp}
+                    onTouchMove={mouseMove}
+                    onTouchEnd={mouseUp}
+                />
+            }
+            <div
+                className={Style.track}
+                id='track'
+                onMouseUp={mouseUp}
+                onTouchEnd={mouseUp}
+                onTouchMove={mouseMove}
+                onMouseDown={mouseDown}
+            >
+                <div
+                    className={Style.thumb}
+                    style={{ top: `${position}%`, touchAction: 'none' }}
+                    onTouchMove={mouseMove}
+                    onMouseDown={mouseDown}
+                    onTouchStart={mouseDown}
+                />
+            </div>
+        </>
+    )
+}
+
+export default Slider;

src/app/styles/slider.module.css

@@ -0,0 +1,24 @@
+.track {
+    width: 0.5rem;
+    border-radius: 5px;
+    border: 1px var(--main-element-color) solid;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: .5rem;
+    margin-right: .5rem;
+}
+
+.thumb {
+    background-image: url('../workshop/[id]/pepe.png');
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    width: 24px;
+    height: 16px;
+    position: relative;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: top 150ms;
+}

src/app/workshop/[id]/bandage_engine.module.tsx

@@ -211,14 +211,6 @@ class Client {
         this.rerender();
     }
 
-    updatePositionSlider() {
-        const value = document.getElementById('position') as HTMLInputElement;
-        if (!value) return;
-        const height = this.pepe_canvas.height;
-        value.max = (12 - height).toString();
-        value.value = this.position.toString();
-    }
-
 
     //-----------RENDER-------------
     rerender(render_original: boolean = true, download?: boolean) {

src/app/workshop/[id]/client_code.tsx

@@ -28,6 +28,7 @@ import Link from 'next/link';
 import { CSSTransition } from 'react-transition-group';
 
 import { IconDownload, IconPlus, IconChevronDown, IconUser, IconEdit, IconX, IconCheck } from '@tabler/icons-react';
+import Slider from '@/app/modules/components/slider.module';
 
 
 const body_part: readonly { value: number, label: String }[] = [
@@ -64,6 +65,7 @@ export default function Home({ data }: { data: Interfaces.Bandage }) {
 
     const [randomColor, setRandomColor] = useState<string>("");
     const [loadExpanded, setLoadExpanded] = useState<boolean>(false);
+    const [rangeProps, setRangeProps] = useState<{ max: number, value: number }>({ max: 8, value: 4 });
     const client = useRef<Client>();
 
 
@@ -104,7 +106,7 @@ export default function Home({ data }: { data: Interfaces.Bandage }) {
                 client.current.pepe_canvas = pepe_canvas;
                 client.current.lining_canvas = lining_canvas;
                 client.current.position = 6 - Math.floor(height / 2);
-                client.current.updatePositionSlider();
+                setRangeProps({ value: client.current.position, max: (12 - client.current.pepe_canvas.height) });
                 client.current.colorable = data.categories.some(val => val.id.toString() === process.env.NEXT_PUBLIC_COLORABLE_ID);
                 const randomColor = getRandomColor();
                 setRandomColor(randomColor);
@@ -234,16 +236,10 @@ export default function Home({ data }: { data: Interfaces.Bandage }) {
                                 </div>
                             }
                             <div className={style.settings_slider}>
-                                <input
-                                    type="range"
-                                    min='0'
-                                    max='8'
-                                    defaultValue='4'
-                                    step='1'
-                                    id='position'
-                                    className={style.position}
-                                    onInput={evt => client.current?.setParams({ position: Number((evt.target as HTMLInputElement).value) })
-                                    }
+                                <Slider
+                                    initial={rangeProps.value}
+                                    range={rangeProps.max}
+                                    onChange={val => client.current?.setParams({ position: val })}
                                 />
                                 <div className={style.settings_slider_1}>
                                     <SlideButton onChange={val => client.current?.setParams({ first_layer: val })}