🆙 Better way to load the slider

package.json

@@ -11,13 +11,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.26.9",
-		"@emoji-mart/data": "^1.2.1",
+        "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
         "@tanstack/react-virtual": "3.2.0",
         "@types/react-transition-group": "^4.4.10",
         "dompurify": "^3.1.5",
-		"emoji-mart": "^5.6.0",
+        "emoji-mart": "^5.6.0",
-		"emoji-toolkit": "10.0.0",
+        "emoji-toolkit": "10.0.0",
         "framer-motion": "^11.2.12",
         "react": "^19.2.4",
         "react-bootstrap": "^2.10.10",

src/components/camera/views/editor/CameraWidgetEditorView.tsx

@@ -1,9 +1,8 @@
 import { GetRoomCameraWidgetManager, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, NitroLogger, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa';
-import ReactSlider from 'react-slider';
 import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, LocalizeText } from '../../../../api';
-import { Button, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Slider, Text } from '../../../../common';
 import { CameraWidgetEffectListView } from './effect-list';
 
 export interface CameraWidgetEditorViewProps {
@@ -181,8 +180,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                             { selectedEffectName && (
                                 <Column center fullWidth gap={ 1 }>
                                     <Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
-                                    <ReactSlider
+                                    <Slider
-                                        className="nitro-slider"
                                         min={ 0 }
                                         max={ 1 }
                                         step={ 0.01 }

src/components/floorplan-editor/views/FloorplanOptionsView.tsx

@@ -1,8 +1,7 @@
 import { FC, useState } from 'react';
 import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCaretLeft, FaCaretRight } from 'react-icons/fa';
-import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../api';
-import { Button, Column, Flex, LayoutGridItem, Text } from '../../../common';
+import { Button, Column, Flex, LayoutGridItem, Slider, Text } from '../../../common';
 import { COLORMAP, FloorAction } from '@nitrots/nitro-renderer';
 import { FloorplanEditor } from '@nitrots/nitro-renderer';
 import { useFloorplanEditorContext } from '../FloorplanEditorContext';
@@ -197,8 +196,7 @@ export const FloorplanOptionsView: FC<FloorplanOptionsViewProps> = props =>
                 <Column size={ 6 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
                     <div style={ { width: '100%', maxWidth: 240 } }>
-                        <ReactSlider
+                        <Slider
-                            className="nitro-slider"
                             min={ MIN_FLOOR_HEIGHT }
                             max={ MAX_FLOOR_HEIGHT }
                             step={ 1 }

src/components/room/widgets/furniture/FurnitureDimmerView.tsx

@@ -1,8 +1,7 @@
 import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { ColorUtils, FurnitureDimmerUtilities, GetConfigurationValue, LocalizeText } from '../../../../api';
-import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Slider, Text } from '../../../../common';
 import { useFurnitureDimmerWidget, useNitroEvent } from '../../../../hooks';
 import { classNames } from '../../../../layout';
 
@@ -63,8 +62,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
                         </div>
                         <div className="flex flex-col gap-1">
                             <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
-                            <ReactSlider
+                            <Slider
-                                className="nitro-slider"
                                 max={ FurnitureDimmerUtilities.MAX_BRIGHTNESS }
                                 min={ FurnitureDimmerUtilities.MIN_BRIGHTNESS }
                                 renderThumb={ (props, state) => <div { ...props }>{ FurnitureDimmerUtilities.scaleBrightness(state.valueNow) }</div> }

src/components/room/widgets/furniture/FurnitureStackHeightView.tsx

@@ -1,8 +1,7 @@
 import { FurnitureStackHeightComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Slider, Text } from '../../../../common';
 import { useFurnitureStackHeightWidget } from '../../../../hooks';
 
 export const FurnitureStackHeightView: FC<{}> = props =>
@@ -34,8 +33,7 @@ export const FurnitureStackHeightView: FC<{}> = props =>
             <NitroCardContentView justifyContent="between">
                 <Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
                 <div className="flex gap-2">
-                    <ReactSlider
+                    <Slider
-                        className="nitro-slider"
                         max={ maxHeight }
                         min={ 0 }
                         renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> }

src/components/wired/views/actions/WiredActionBaseView.tsx

@@ -1,8 +1,7 @@
 import { WiredActionDefinition } from '@nitrots/nitro-renderer';
 import { FC, PropsWithChildren, useEffect } from 'react';
-import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -29,8 +28,7 @@ export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>
             { !!children && <hr className="m-0 bg-dark" /> }
             <div className="flex flex-col">
                 <Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(actionDelay) ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 20 }
                     min={ 0 }
                     value={ actionDelay }

src/components/wired/views/actions/WiredActionGiveRewardView.tsx

@@ -1,8 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import { FaPlus, FaTrash } from 'react-icons/fa';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Button, Text } from '../../../../common';
+import { Button, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { NitroInput } from '../../../../layout';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -103,8 +102,7 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
                     Reward limit not set. Make sure rewards are badges or non-tradeable items.
                 </Text> }
             { limitEnabled &&
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 1000 }
                     min={ 1 }
                     value={ rewardsLimit }

src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -34,8 +33,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 100 }
                     min={ 1 }
                     value={ points }
@@ -43,8 +41,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
             </div>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 10 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/actions/WiredActionGiveScoreView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -31,8 +30,7 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 100 }
                     min={ 1 }
                     value={ points }
@@ -40,8 +38,7 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
             </div>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 10 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/actions/WiredActionMoveFurniToView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -50,8 +49,7 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 5 }
                     min={ 1 }
                     value={ spacing }

src/components/wired/views/actions/WiredActionMuteUserView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { NitroInput } from '../../../../layout';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -28,8 +27,7 @@ export const WiredActionMuteUserView: FC<{}> = props =>
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.length.minutes', [ 'minutes' ], [ time.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 10 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -21,8 +20,7 @@ export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 1200 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -21,8 +20,7 @@ export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 1200 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -31,8 +30,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 50 }
                     min={ 1 }
                     value={ min }
@@ -40,8 +38,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
             </div>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 125 }
                     min={ 0 }
                     value={ max }

src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -21,8 +20,7 @@ export const WiredTriggeExecuteOnceView: FC<{}> = props =>
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 1200 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx

@@ -1,5 +1,4 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { FriendlyTime, LocalizeText, WiredFurniType } from '../../../../api';
 import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
@@ -21,8 +20,7 @@ export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 120 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx

@@ -1,5 +1,4 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
 import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
@@ -21,8 +20,7 @@ export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 60 }
                     min={ 1 }
                     value={ time }

src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx

@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Text } from '../../../../common';
+import { Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -21,8 +20,7 @@ export const WiredTriggeScoreAchievedView: FC<{}> = props =>
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</Text>
-                <ReactSlider
+                <Slider
-                    className={ 'nitro-slider' }
                     max={ 1000 }
                     min={ 1 }
                     value={ points }