From 27c3adbf06b03bd8fbbaca8100ce1fcd3f558d4b Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 19 Mar 2024 10:28:57 +0100
Subject: [PATCH] New: react slider with button

---
 .../camera/views/editor/CameraWidgetEditorView.tsx       | 5 ++---
 .../room/widgets/furniture/FurnitureDimmerView.tsx       | 5 ++---
 .../room/widgets/furniture/FurnitureStackHeightView.tsx  | 5 ++---
 .../wired/views/actions/WiredActionBaseView.tsx          | 7 +++----
 .../wired/views/actions/WiredActionGiveRewardView.tsx    | 6 ++----
 .../actions/WiredActionGiveScoreToPredefinedTeamView.tsx | 8 +++-----
 .../wired/views/actions/WiredActionGiveScoreView.tsx     | 8 +++-----
 .../wired/views/actions/WiredActionMoveFurniToView.tsx   | 5 ++---
 .../wired/views/actions/WiredActionMuteUserView.tsx      | 5 ++---
 .../conditions/WiredConditionTimeElapsedLessView.tsx     | 6 ++----
 .../conditions/WiredConditionTimeElapsedMoreView.tsx     | 6 ++----
 .../conditions/WiredConditionUserCountInRoomView.tsx     | 9 +++------
 .../wired/views/triggers/WiredTriggerExecuteOnceView.tsx | 6 ++----
 .../triggers/WiredTriggerExecutePeriodicallyLongView.tsx | 6 ++----
 .../triggers/WiredTriggerExecutePeriodicallyView.tsx     | 6 ++----
 .../views/triggers/WiredTriggerScoreAchievedView.tsx     | 6 ++----
 16 files changed, 36 insertions(+), 63 deletions(-)

diff --git a/src/components/camera/views/editor/CameraWidgetEditorView.tsx b/src/components/camera/views/editor/CameraWidgetEditorView.tsx
index d7dfbf7..3eee17b 100644
--- a/src/components/camera/views/editor/CameraWidgetEditorView.tsx
+++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx
@@ -3,7 +3,7 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa';
 import ReactSlider from 'react-slider';
 import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, GetRoomCameraWidgetManager, LocalizeText } from '../../../../api';
-import { Button, ButtonGroup, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
+import { Button, ButtonGroup, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Slider, Text } from '../../../../common';
 import { CameraWidgetEffectListView } from './effect-list/CameraWidgetEffectListView';
 
 export interface CameraWidgetEditorViewProps
@@ -189,8 +189,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                             { selectedEffectName &&
                                 <Column center fullWidth gap={ 1 }>
                                     <Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
-                                    <ReactSlider
-                                        className={ 'nitro-slider' }
+                                    <Slider
                                         min={ 0 }
                                         max={ 1 }
                                         step={ 0.01 }
diff --git a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
index 1cf53ba..c3a309a 100644
--- a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
@@ -2,7 +2,7 @@ import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { ColorUtils, FurnitureDimmerUtilities, GetConfiguration, LocalizeText } from '../../../../api';
-import { Base, Button, classNames, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
+import { Base, Button, classNames, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Slider, Text } from '../../../../common';
 import { useFurnitureDimmerWidget, useRoomEngineEvent } from '../../../../hooks';
 
 export const FurnitureDimmerView: FC<{}> = props =>
@@ -62,8 +62,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
                         </Column>
                         <Column gap={ 1 }>
                             <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
-                            <ReactSlider
-                                className="nitro-slider"
+                            <Slider
                                 min={ FurnitureDimmerUtilities.MIN_BRIGHTNESS }
                                 max={ FurnitureDimmerUtilities.MAX_BRIGHTNESS }
                                 value={ selectedBrightness }
diff --git a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
index d4d1039..19787d8 100644
--- a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
@@ -2,7 +2,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, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Slider, Text } from '../../../../common';
 import { useFurnitureStackHeightWidget } from '../../../../hooks';
 
 export const FurnitureStackHeightView: FC<{}> = props =>
@@ -34,8 +34,7 @@ export const FurnitureStackHeightView: FC<{}> = props =>
             <NitroCardContentView justifyContent="between">
                 <Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
                 <Flex gap={ 2 }>
-                    <ReactSlider
-                        className="nitro-slider"
+                    <Slider
                         min={ 0 }
                         max={ maxHeight }
                         step={ 0.01 }
diff --git a/src/components/wired/views/actions/WiredActionBaseView.tsx b/src/components/wired/views/actions/WiredActionBaseView.tsx
index 6c7a86e..f8cc521 100644
--- a/src/components/wired/views/actions/WiredActionBaseView.tsx
+++ b/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 { Column, Text } from '../../../../common';
+import { Button, Column, Flex, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -29,11 +28,11 @@ export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>
             { !!children && <hr className="m-0 bg-dark" /> }
             <Column>
                 <Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(actionDelay) ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 0 }
                     max={ 20 }
                     value={ actionDelay }
+					snapDragDisabled={ false }
                     onChange={ event => setActionDelay(event) } />
             </Column>
         </WiredBaseView>
diff --git a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
index a255fe3..e7f1895 100644
--- a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
+++ b/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, Column, Flex, Text } from '../../../../common';
+import { Button, Column, Flex, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -102,8 +101,7 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
                     Reward limit not set. Make sure rewards are badges or non-tradeable items.
                 </Text> }
             { limitEnabled &&
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 1000 }
                     value={ rewardsLimit }
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
index 43ab240..c7ec598 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Column, Flex, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -34,8 +34,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 100 }
                     value={ points }
@@ -43,8 +42,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
             </Column>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 10 }
                     value={ time }
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
index 28bfb0b..7b8be0b 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -31,8 +31,7 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 100 }
                     value={ points }
@@ -40,8 +39,7 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
             </Column>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 10 }
                     value={ time }
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
index 56bdb6b..5fdae57 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Column, Flex, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -50,8 +50,7 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 5 }
                     value={ spacing }
diff --git a/src/components/wired/views/actions/WiredActionMuteUserView.tsx b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
index 1665036..6b1c7f8 100644
--- a/src/components/wired/views/actions/WiredActionMuteUserView.tsx
+++ b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetConfiguration, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -27,8 +27,7 @@ export const WiredActionMuteUserView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.length.minutes', [ 'minutes' ], [ time.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 10 }
                     value={ time }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
index 31d6d79..93968b9 100644
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
+++ b/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 { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -21,8 +20,7 @@ export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 1200 }
                     value={ time }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
index cb158e6..2bd518a 100644
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
+++ b/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 { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -21,8 +20,7 @@ export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 1200 }
                     value={ time }
diff --git a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
index 824d7ae..82454d5 100644
--- a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
+++ b/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 { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -31,8 +30,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 50 }
                     value={ min }
@@ -40,8 +38,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
             </Column>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 50 }
                     value={ max }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx b/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
index ea3d61b..2d237a7 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
+++ b/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 { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -21,8 +20,7 @@ export const WiredTriggeExecuteOnceView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 1200 }
                     value={ time }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
index d9bc6bc..cc484e7 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
@@ -1,8 +1,7 @@
 import { FriendlyTime } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -22,8 +21,7 @@ export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 120 }
                     value={ time }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
index b77e642..f385b7b 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
-import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -21,8 +20,7 @@ export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 60 }
                     value={ time }
diff --git a/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx b/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
index 883503b..8097227 100644
--- a/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
+++ b/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 { Column, Text } from '../../../../common';
+import { Column, Slider, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -21,8 +20,7 @@ export const WiredTriggeScoreAchievedView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</Text>
-                <ReactSlider
-                    className={ 'nitro-slider' }
+                <Slider
                     min={ 1 }
                     max={ 1000 }
                     value={ points }